Angular Notes

1. How to routing in angular.

step1. add appRoutingModule.ts file in project

command: ng g m approutingModule

ng g m approutingModule --flat

(flat is used for puts the file in src/app instead of its own folder)

In angular 7 it basically tell us to add approutingModule when we creating

project , we simply add it by yes. then no need of generate it by command it will
available it on app folder.

step2. imports all component which we want to display by routing in app routing
module. like

import { HomeComponent } from './home/home.component';

we can copy this by app-module,ts file where all component is already imported.

step3. add path and component like

{ path:' pathname ', component: HomeComponent } in the place of const.

for example

const routes: Routes = [

{ path:'home', component: HomeComponent },

{ path:'about', component: AboutComponent }

];

step 4. add routerlink where we want to link any component its work like a ancher
tag in html

routerLink="pathname"

example: <p routerLink="home">Home</p>

step5. Add router-outlet where we want to display our routing component

example: <router-outlet></router-outlet>

Note If we add app-routingModule.ts file in the time of creating project then we

don't have need of add because it will already added in appcomponent.html file.

2. How To Two data binding.

step1: open app.module.ts file

import ngModule for example

import { FormsModule } from '@angular/forms';

if it is already present then no need of import.

step2: import FormsModule in app.module.ts file for example

import { FormsModule } from '@angular/forms';

then imports in decorator of app module in imports metedata. for

example

imports: [

BrowserModule,

AppRoutingModule,

FormsModule

],
step3: add ngModel for two way data binding in input tag in html file

for example [(ngModel)]="name"

<input type ="text" placeholder="name" [(ngModel)]="Name">

We can display this name by expression {{Name}} in any place of

webpage .

step4: declear expression type in .ts file like it will string or number etc.

for example

Name;

(Note : Name attribute is required for two way data binding)

3. Data binding in angular

1. interpolation: {{.....}}

simply use interpolation in html file

{{ Interpolationtype }}

and value of interpolation in .ts file

interpolationtype="data binding interpolation";

2. Property binding: [property]="value";

simply use property of tag and valuename in html file

for example

<img [src]="imgurl" >

then assign the value of property in ts file

 for example

imgurl="assets/logo.png";

3. Event binding: (event)=”function”

we can use it on event like click ,change ,keyup

for example in html

<button type="button" (click)="function()" >click</button>

then write your code in ts file under the function

for example in .ts

function()

block of code;

5. How to make local variable to globle variable

accessSpecifier variablename: type;

for example

private product : any[];

6: how to *ngIf in angular.

syntax:

*ngIf="condition;then truestatement" (without else statement)

*ngIf="condition;then truestatement else falsestatement " (with else

statement)
for example

<ng-template *ngIf="dynamicDatacondtion > 0;then content else

other_content"></ng-template>

<ng-template #content class="statement1">statement true , You have enter

{{dynamicData}}</ng-template>

<ng-template #other_content class="statement1">statement false , You have

enter {{dynamicData}}</ng-template>

7: How to *ngFor in angular.

syntax: *ngFor= "let propertybindingname of functionArraystore"

example:

<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>

in ts file

powers = ['Really Smart', 'Super Flexible',

'Super Hot', 'Weather Changer'];

(Note : first declare the variable by let keyword binding the property by
propertybinding the use of keywords the arrayname where we store the
elements. then bind the property like value .then open ts file and decare array
with same name and stores the elements.)

8: How to Template-driven forms in angular.

first create a class that capture their changes and update an instance of a model.

command for class: ng g class classname

or ng generate class hero

then it will create two file hero.ts and hero.spec.ts

you can write any code in ts file under the constructor

example:

export class Hero {

constructor(

public id: number,

public name: string,

public power: string,

public alterEgo?: string

){ }

then open you component .ts file where you want to write the form and import
the hero class.

for example :

import { Hero } from '../hero';

then open app.module.ts

and import the form module

import { FormsModule } from '@angular/forms';

imports: [

FormsModule

if it is already here then no need of import again.

then create html form where we want to show

<form>

<div class="form-group">

<label for="name">Name</label>

<input type="text" class="form-control" id="name" required>

</div>

</form>

then add two way data binding

<input type="text" class="form-control" id="name" required autocomplete="off"

[(ngModel)]="personalterego" name="personalterego">

(Note : Required and name attributes is needed .)

then add #heroForm="ngForm" in form tag

for example

<form #heroForm="ngForm"></form>

then Add custom CSS for visual feedback

.ng-valid[required], .ng-valid.required

border-left: 5px solid #42A948; /* green */

.ng-invalid:not(form) {
 border-left: 5px solid #a94442; /* red */

9. How to form validation in angular

firstly make sure you have done template driven validation already.because it
needed in validation.

Firstly we have need to export ngModel in a local variable we can export ngModel
by this way

#name="ngModel"

where name is a local variable .you can use any word.

for example consider this example

<input type="text" class="form-control" id="name" name="personname"

[(ngModel)]="personname" required autocomplete="off" #name="ngModel"
minlength="4" appForbiddenName="bob">

(Note: required and name attribute is needed appForBiddenName is a custom

validator)

then we use the condition by ngIf

<div *ngIf="name.invalid && (name.dirty || name.touched)"

class="alert alert-danger"></div>

(here name is a local variable which we use. and invalid , dirty and touched is
predefine class of ngForm)

then we can use multiple condition and error under this like

<div *ngIf="name.invalid && (name.dirty || name.touched)"

class="alert alert-danger">
 <div *ngIf="name.errors.required">

Name is required.

</div>

<div *ngIf="name.errors.minlength">

Name must be at least 4 characters long.

</div>

<div *ngIf="name.errors.forbiddenName">

Name cannot be Bob.

</div>

</div>

(Note : we can give the condition by this way. *ngIf

="localvariablename.errors.attributename" and then messege)

totle code look like this

<form #registrationclassForm="ngForm">

<div class="form-group">

<label for="name">Name</label>

<input type="text" class="form-control" id="name"

name="personname" [(ngModel)]="personname" required autocomplete="off"
#name="ngModel" minlength="4" appForbiddenName="bob">{{personname}}

<div *ngIf="name.invalid && (name.dirty || name.touched)"

class="alert alert-danger">

<div *ngIf="name.errors.required">
 Name is required.

</div>

<div *ngIf="name.errors.minlength">

Name must be at least 4 characters long.

</div>

<div *ngIf="name.errors.forbiddenName">

Name cannot be Bob.

</div>

</div>

</div>

</form>

How to angular material in project

Step 1 install angular material , angular cdk , and angular material

Cmd command is

npm install --save @angular/material @angular/cdk @angular/animations

step 2 configure animations.

After this we Have need to import animation package in app module for enable
animation support.

import {BrowserAnimationsModule} from '@angular/platform-

browser/animations';
@NgModule({

...

imports: [BrowserAnimationsModule],

...

})

Step 3 import component modules

Import the NgModule for each component you want to use:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({

...

imports: [MatButtonModule, MatCheckboxModule],

...

})

Step 4 include a themes

Including a theme is required to apply all of the core and theme styles to your
application.

For this you can add or import idigo-pink.css in your globle css.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 5 gesture support.

Some components (mat-slide-toggle, mat-slider, matTooltip) rely

on HammerJS for gestures. In order to get the full feature-set of these components,
HammerJS must be loaded into the application.

To install via npm, use the following command:

npm install --save hammerjs

step 6 add matarial icon (optional)

If you want to use the mat-icon component with the

official Material Design Icons, load the icon font in
your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

Step 7 Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to
add @angular/material and@angular/cdk to the SystemJS configuration.

For this use this code in the systemjs

System.config({

// Existing configuration options

map: {

// ...

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

// CDK individual packages

'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-
platform.umd.js',

'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',

// ...

'hammerjs': 'npm:hammerjs',

},

packages: {

//...

hammerjs: {main: './hammer.min.js', defaultExtension: 'js'}

 //...

});

Command for creating angular material component.

1.address form – used for form button, text feild ,

area

Command ng generate @angular/material:address-form component-name

2. navigation – used for navigation side bar and

toolbar.

Command ng generate @angular/material:nav component-name

3. table –used for table formate pagination with filter

Command ng generate @angular/material:table component-name

4. dashboad –used for dynamic grid list of matarial

design card.

Command ng generate @angular/material:dashboard component-name

5.tree –used for showing folders tree.

Command ng generate @angular/material:tree component-name

6. drag-drop –used for drag and drop compnent.

Command ng generate @angular/cdk:drag-drop component-name