angular
Synopsis
Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.
Angular Binding:
| Syntax | Description |
|---|
<p>{{expression}}</p> | Interpolation |
<p [property]="expression"></p> | Property binding |
<p>title</p> | One-way binding [No changes were reflected in the component] |
<input [(ngModel)]="expression"> | Two-way binding |
<p bind-property="expression"></p> | Property binding |
<p on-event="statement"></p> | Event binding |
<button [attr.aria-label]="ok">Ok</button> | Attribute binding |
<p bind-innerHTML="htmlExp"></p> | HTML binding |
<p [style.color]="colorExp">...</p> | Style binding |
<p [class.special]="isSpecial">...</p> | Class binding |
<p [ngClass]="{class-1:condition1, class-2:condition2}">...</p> | Class binding with ngClass |
<student-details [student]="currStudent"></student-details> | Component binding |
<div [ngClass] = "{selected: isSelected}">Student</div> | Directive Binding |
<div [ngSwitch]="switchExpression"> | Structural Directive |
<input [value]="student.name" (input)="student.name=$event.target.value"> | $event |
Angular Lifecycle Hooks:
| Lifecycle Hook | Description |
|---|
| ngOnInit() | It get invoked when angular initialize component or directive. |
| ngOnChanges() | It get invoked when angular sets data bound input property i.e. @Input(). |
| ngDoCheck() | It get invoked for every changes. |
| ngAfterContentInit() | It get invoked after angular project content in its view. |
| ngAfterContentChecked() | It get invoked after angular checks the binding of content into view. |
| ngAfterViewInit() | It get invoked after angular create component view. |
| ngAfterViewChecked() | It get invoked after angular checks the binding of component view. |
| ngOnDestroy() | It get invoked before angular destroy component or directives. |
Angular CLI commands:
| Command | Description |
|---|
| ng new project-name | To create a new project |
| ng g component | To generate a component |
| ng g directive | To generate directive |
| ng g pipe | To generate pipe |
| ng g service | To generate service |
| ng g class | To generate class |
| ng g interface | To generate interface |
| ng serve | To run application in local server |
| ng build [—e=] | To create a build and change environment |
| ng test | To test your application |
| ng e2e | To test your application |
| ng generate universal [options] | To generate universal command |
| ng g universal [options] | To generate universal command |
| ng add | Adds support for an external library |
| ng update | Updates workspace and its dependencies |
| ng version | Outputs Angular CLI version |