Angular Cheat Sheet
Angular Decorators, Directives, Routing, Pipes, etc…
Angular is one of the Best UI Framework which helps developers to Modularize, Componentize Front End applications, which improves Readability, Maintainability, Testability, Reusability of web applications.
Angular Framework primarily provides below basic building blocks, which facilitates developers in developing web applications
- Modules
- Components, with Forms(Template or Reactive based)
- Services
- Directives
- Decorators — prefixed with @ symbol, to specify Module or Component or Service, etc…
- Routing — Used to navigate between Components
- Pipes — generally used with | symbol, either transforms data, or filter data from an existing List
- Angular CLI commands
Angular primarily uses Typescript, HTML, CSS for Styling. Since Typescript is based on Javascript, you can continue to use Javascript objects, functions directly.
Component:
Each component generally has 4 different files
app.component.html — Display part of a Component, considered as View/Template. This file can use HTML Tags, Angular directives, etc…
app.component.ts — Typescript file which has Class, methods of the Component. A component can implement Component Life Cycle methods such as ngOnInit( ), ngOnDestroy( ), etc…
app.component.css — Styling specific to the Component
app.component.spec.ts — Jasmine code to Test the Component
Data Binding(used in html file):
{{ }} — Called as interpolation — One way binding(from Component Class to View/Template)
[(ngModel)] — Two way binding, i..e between Component Class(.ts file) and View/Template(.html file)
(click) — Event binding
Service:
Unlike a Component, Service does not have View. Generally, any Business logic or code such as to interact with REST API end points is placed in a Service. A Service has below two files
app.service.ts — Typescript file which has Business logic provided by the Service
app.service.spec.ts files — Jasmine file to test the Service
Builtin Directives(used in html file):
ngIf — Structural directive, to conditionally render element(s) of a Component
ngFor — Structural directive, to iterate through an array or any data structure and render one or more elements in a Component
ngSwitch — also a Structural directive, to render a specific element, based on an expression(similar to switch statement)
ngClass — to specify styling class
ngStyle — to specify a value to css property
(ngSubmit) — to handle submit event of a Reactive Form
formGroup, formControlName, formGroupName — directives used to develop ReactiveForm
Builtin Decorators(used in ts file)
@Component — Class Level Decorator — Indicates a specific class is a Component
@Injectable — Class Level Decorator — Indicates a specific class is a Service
@NgModule — Class Level Decorator — New Angular Module
@Input — To send Data from Parent to Child Component
@Output — To send Data from Child to Parent Component
@ViewChild —To refer an element or Component specified in View of another Component
@ViewChildren — To refer one or more elements or Components in View of another Component
@Pipe — To create a custom Pipe. Pipe generally used in Template files
Routing:
Angular Routing helps to Navigate between Multiple Components and uses Single Page Application approach. Below Routing directives are used in html file
[routerLink] — Directive to specify a routing Link
<router-output> — Directive to specify where Selected route Component need to be rendered.
Angular CLI Commands(used from command line):
ng new — to create a New Angular Project
ng serve — to build and run a project
ng generate component — to create a new component
ng generate service — to create a new service
ng generate guard — to generate Auth Guard for a specific route, this uses CanActivate
ng build — to build the project
ng test — to run Jasmine test scripts of the Angular Project
Miscellaneous:
CanActivate — interface used with Routing, to implement AuthGuard. In routing, AuthGuard, restricts access to specific path(s), which can be accessed only after login.
CanDeactivate — interface used with Routing, to get User Confirmation, before moving away from a Form
FormControl, FormGroup, FormBuilder — Angular classes used to handle various input Form controls of a reactive form.
Pipe Symbol, | — is used in HTML template file, is used to transform a value or to filter out certain elements from an array
Observable — used for asynchronous communication between various parts of application or to receive asynchronous data from REST API call. subscribe( ) method of Observable is used quite frequently. Observable is part of rxjs
HttpClient — this is used to make REST API calls, to interact with Server
Components can contain Forms for user Input, these forms can be Template based or Reactive based.
package.json file has list of all npm package dependencies
angular.json file has configurations for tsc compiler, global scripts, global style sheets(if any)
Angular has provision to
Create Custom Decorators, Directives, Pipes
Specify Validation rules of a Form element
Also Read:
