title	description	created	updated
Angular CheatSheet	Angular cheatsheet contains basics of angular binding & angular CLI.	2022-10-03	2022-10-03

Angular Cheatsheet

Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.

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">

ngOnInit()

 It get invoked when angular initialize component or directive.

ngOnChanges()

 It get invoked when angular sets data bound input property i.e. @Input().

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.

Provide feedback