Angular CheatSheet: The Basics of Angular Binding and Angular CLI

Master the basics of Angular binding and CLI with this comprehensive cheatsheet. This comprehensive Angular cheatsheet covers the basics of Angular binding and Angular CLI, everything you need to know to start building Angular applications quickly and easily.

From data binding to directives to Angular CLI commands, this cheatsheet has it all. It's the perfect resource for beginners and experienced developers alike.

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.

#angular