| title | description | created |
|---|---|---|
Angular CheatSheet |
Angular CheatSheet contains basics of angular binding & angular CLI. |
2022-10-24 |
Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.
| 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"> |
| 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. |
| 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. |