Angular CheatSheet for Developers
What is Angular?
Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.
Angular Binding:
| Description | Command |
|---|---|
One Way Binding | <p>title</p> - No changes were reflected back to the variable. |
Two Way Binding | <input [(ngModel)]="student.FirstName"> - Changes were reflected back to the variable |
Property Binding | <img [src]="student.profilePicUrl"> |
Attribute Binding | <button [attr.aria-label]="ok">Ok</button> |
Class Binding | <div [class.Focused]="isFocused">Selected</div> |
ngClass | <div [ngClass]="assignClasses()"> <h1>{{student.FirstName}}</h1> </div> |
Style Binding | <p [style.color]="isSelected ? 'green' : 'red'">Option {{i}}</p> |
ngStyle | <div [ngStyle]="setStyles()"> {{student.name}} </div> |
Component Binding | <student-details [student]="currStudent"></student-details> |
Directive Binding | <div [ngClass] = "{selected: isSelected}">Student</div> |
Event Binding | <button (click)="test()">Test</button> |
$event | <input [value]="student.name" (input)="student.name=$event.target.value"> |
Angular Lifecycle Hooks:
| Command | 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 <name> | To generate a component |
ng g directive <name> | To generate directive |
ng g pipe <name> | To generate pipe |
ng g service <name> | To generate service |
ng g class <name> | To generate class |
ng g interface <name> | To g interface |
ng serve | Run application in local server |
ng build [--e=<name>] | Create a build and change environment |
ng test | e2e | Testing your application |
| Command | Description |
|---|---|
ng generate universal [options] OR ng g universal [options] | - universal command - This command is used to pass this schematic to the run command to set up server-side rendering for an app |
--defaults=true | false: | - AND [options] - When true, it disables interactive input prompts for options with a default. |
--dryRun=true | false: | - AND [options] - When true, it runs through and reports activity without writing out results. |