Updated March 4, 2023
Introduction to Angular 2 Cheat Sheet
Angular 2 is an open-source framework that has been built over JavaScript. It has been mainly used for developing front-end web applications. It is the successor of AngularJS. It is written in TypeScript. It is developed by Google. Angular 2 is built on modern JavaScript which uses ES6. Angular 2 has better event handling capabilities, powerful templates, better support for mobile devices and desktop web applications as well. It is also compatible with mobile devices and across all platforms like Windows, Mac, and Linux.
Angular 2 has key features to develop applications that are components, typescript, and services. Angular 2 has different components that are modules, components, templates, metadata, and service. Components help in building application into many modules and which helps in maintaining the application for a longer time. The different set of code has been maintained and used by different modules of application taken care by service feature. Modules help in breaking the application into a logical piece that coded in to perform a particular task.
Commands and Content on Angular 2 Cheat Sheet
Angular 2 cheat sheet has extensive library, scalable, extendable, interactive and contain many in built methods to compute common operations. There is different syntax for templates, NgModules, Built-in directives, forms and other configurations available as below:
| Template syntax | Description |
| <input [value]=”name”> | It binds the property ‘value’ to expression result ‘name’ |
| <div [attr.role]=”myrole”> | It binds the attribute ‘role’ to expression result ‘my role’ |
| <button (click)=”readText($event)”> | It will call the method read Text, when click event is triggered. |
| <div title =”Hello {{myname}}”> | It binds the property to an interpolated string |
| <p> Hello {{myname}}</p> | It binds the context to an interpolated string |
| <my-cmp [(title)]=”myname”> | It sets up the two way binding. |
| <p *myTR=”myExp”>…</p> | * symbol turns the current element into an embedded temp. |
| <p>Student: {{student?.sname}}</p> | ? is navigation operator tells the student field is optional |
| <div [style.width.px]=”mySize”> | It binds the style property width to express result mysize. |
| <video #movieplayer …>
<button (click)=”movieplayer.play()”> </video> |
Used for data binding and event binding expression in the template. |
| <p>Car No.: {{vehicleNumber | myCarNuFormat}}</p> | It transforms the current value of vehicle number via pipe mycarNuformat. |
| <svg:rect x=”0″ y=”0″ width=”100″ height=”100″/> | It disambiguate the element from an HTML component |
| <div [class.extra-sparkle]=”isReq”> | It binds the presence of class on the truth expression. |
NgModules: – The different Ngmodule directives are:
| Directives | Description |
| @NgModule({declarations..}) | It defines a module that contains directives etc. |
| declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] | It will tell the list of components, directives and pipes belong to this module. |
| exports: [MyRedComponent, MyDatePipe] | It will list of components and pipes visible to import this module |
| imports: [BrowserModule, SomeOtherModule] | It will list of modules to import into this module |
| providers: [MyService, { provide: … }] | It provides the list of dependency injection providers visible both to contents of the module |
| entryComponents: [SomeComponent, OtherComponent] | It will provide the list of components not referenced in a reachable template. |
There are other directives and component change detection and lifecycle hooks available which can implement as class methods are below:
| Directives | Description |
| constructor(myService: MyService, …) { … } | It is used to inject dependencies. |
| ngOnChanges(changeRecord) { … } | It is called after every change to input properties and before processing content or child views |
| ngOnInit() { … } | It is called after constructor and initializing properties |
| ngDoCheck() { … } | It is called every time when properties of component or directives are checked. It is used to extend for performing a customs check. |
| ngAfterContentInit() { … } | It is called after ngOninit when the components or directives content has been initialized. |
| ngAfterContentChecked() { … } | It is called after every check of the components or directive’s content. |
| ngAfterViewInit() { … } | It is called after ngaftercontentint when the component views and child views directive has been initialized. |
| ngAfterViewChecked() { … } | It is being called after each check of component views and child views that directive is already in. |
| ngOnDestroy() { … } | It is being called once, before destroying the instance. |
Free Tips and Tricks of using Angular 2 Cheat Sheet Commands
- In Angular2 cheat sheet, platformBrowserDynamic ().bootstrapModule (AppModule); helps in bootstrapping the application, using the root can component from the specified.
- In Angular2, bootstrap: [MyAppComponent] will list the components to bootstrap when this module is bootstrapped.
- <section *ngIf=”showSection”> this is built in directive in angualr2 to remove or recreates a portion of Dom tree based on expression.
- <li *ngFor=”let item of list”> it turns the list element and its content to template and it is being used to instantiate a view for each item in list.
- <div [ngSwitch]=“conditionExpression”> </div> this directive is being used for selecting the templates based on the expression value or in simple words like switch case in oops.
- <div [ngStyle]=”{‘property’: ‘value’}”>, <div [ngStyle]=”dynamicStyles()”> these directives allow you to assign styles to an HTML element using CSS and this CSS can be directly accessible.
- <div [ngClass]=”{‘active’: isActive, ‘disabled’: isDisabled}”> this directive binds the CSS classes on the element to trusted map values.
- <input [(ngModel)]=”Name”> this directive provides the two way binding, parsing and validation for form controls.
- selector: ‘.cool-button:not(a)’ this is directive configuration which specifies the CSS selector that identifies this directive in template. It does not support parent child selector.
- providers: [MyService, { provide: … }] it provides the list of dependency injection providers for directive and children.
- { provide: MyService, useClass: MyMockService } it will set or overrides the provider for service to class.
- { provide: My Value, use Value: 4 } it will set or override the provider value to 4
Conclusion
Angular 2 cheat sheet has lot of features and different directives, modules are available for developing that helps in making the application more interactive for user and developers to track issues and functionality. It is extensive and reusable for other applications. Angular2 is using the typescript which is completely different from AngularJS earlier version.
The angular 2 cheat sheet is easier to learn as its learning curve is simple and straight for beginners and for students as well. The knowledge of JavaScript would be an advantage while using angular for development. It is always good to reskill ourselves.
Recommended Articles
This has been a guide to Angular 2 Cheat Sheet. Here we have discussed the content and command as well as free tips and tricks of Angular 2 Cheat Sheet. You may also look at the following article to learn more –
