Cheat Sheet

| Bootstrapping | Details | |:--- |:--- | | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | Import `platformBrowserDynamic` from `@angular/platform-browser-dynamic`. | | platformBrowserDynamic().bootstrapModule(AppModule); | Bootstraps the application, using the root component from the specified `NgModule`. | | NgModules | Details | |:--- |:--- | | import { NgModule } from '@angular/core'; | Import `NgModule` from `@angular/core`. | | @NgModule({   declarations: …,   imports: …,   exports: …,   providers: …,   bootstrap: … }) class MyModule {} | Defines a module that contains components, directives, pipes, and providers. | | declarations: [   MyRedComponent,   MyBlueComponent,   MyDatePipe ] | List of components, directives, and pipes that belong to this module. | | imports: [   BrowserModule,   SomeOtherModule ] | List of modules to import into this module. Everything from the imported modules is available to `declarations` of this module. | | exports: [   MyRedComponent,   MyDatePipe ] | List of components, directives, and pipes visible to modules that import this module. | | providers: [   MyService,   { provide: … } ] | List of dependency injection providers visible both to the contents of this module and to importers of this module. | | bootstrap: [MyAppComponent] | List of components to bootstrap when this module is bootstrapped. | | Template syntax | Details | |:--- |:--- | | <input [value]="firstName"> | Binds property `value` to the result of expression `firstName`. | | <div [attr.role]="myAriaRole"> | Binds attribute `role` to the result of expression `myAriaRole`. | | <div [class.extra-sparkle]="isDelightful"> | Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`. | | <div [style.width.px]="mySize"> | Binds style property `width` to the result of expression `mySize` in pixels. Units are optional. | | <button (click)="readRainbow($event)"> | Calls method `readRainbow` when a click event is triggered on this button element \(or its children\) and passes in the event object. | | <div title="Hello {{ponyName}}"> | Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hello ' + ponyName"> | | <p>   Hello {{ponyName}} </p> | Binds text content to an interpolated string, for example, "Hello Seabiscuit". | | <my-cmp [(title)]="name"> | Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event"> | | <video #movieplayer …></video> <button (click)="movieplayer.play()">   Play </button> | Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template. | | <p *myUnless="myExpression">   … </p> | The asterisk \(`*`\) character turns the current element into an embedded template. Equivalent to: <ng-template [myUnless]="myExpression">   <p>     …   </p> </ng-template> | | <p>   Card No.: {{cardNumber | myCardNumberFormatter}} </p> | Transforms the current value of expression `cardNumber` using the pipe called `myCardNumberFormatter`. | | <p>   Employer: {{employer?.companyName}} </p> | The safe navigation operator \(`?`\) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored. | | <svg:rect x="0"           y="0"           width="100"           height="100"/> | An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component. | | <svg>   <rect x="0"         y="0"         width="100"         height="100"/> </svg> | An `` root element is detected as an SVG element automatically, without the prefix. | | Built-in directives | Details | |:--- |:--- | | import { CommonModule } from '@angular/common'; | Import `CommonModule` from `@angular/common`. | | <section *ngIf="showSection"> | Removes or recreates a portion of the DOM tree based on the `showSection` expression. | | <li *ngFor="let item of list"> | Turns the `li` element and its contents into a template, and uses that to instantiate a view for each item in list. | | <div [ngSwitch]="conditionExpression">   <ng-template [ngSwitchCase]="case1Exp">     …   </ng-template>   <ng-template ngSwitchCase="case2LiteralString">     …   </ng-template>   <ng-template ngSwitchDefault>     …   </ng-template> </div> | Conditionally swaps the contents of the `div` by selecting one of the embedded templates based on the current value of `conditionExpression`. | | <div [ngClass]="{'active': isActive,                  'disabled': isDisabled}"> | Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return `{class-name: true/false}` map. | | <div [ngStyle]="{'property': 'value'}"> <div [ngStyle]="dynamicStyles()"> | Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. | | Forms | Details | |:--- |:--- | | import { FormsModule } from '@angular/forms'; | Import `FormsModule` from `@angular/forms`. | | <input [(ngModel)]="userName"> | Provides two-way data-binding, parsing, and validation for form controls. | | Class decorators | Details | |:--- |:--- | | import { Directive, … } from '@angular/core'; | Import `Directive, …` from `@angular/core';`. | | @Component({…}) class MyComponent() {} | Declares that a class is a component and provides metadata about the component. | | @Directive({…}) class MyDirective() {} | Declares that a class is a directive and provides metadata about the directive. | | @Pipe({…}) class MyPipe() {} | Declares that a class is a pipe and provides metadata about the pipe. | | @Injectable() class MyService() {} | Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. | | Directive configuration | Details | |:--- |:--- | | @Directive({   property1: value1,   … }) | Add `property1` property with `value1` value to Directive. | | selector: '.cool-button:not(a)' | Specifies a CSS selector that identifies this directive within a template. Supported selectors include `element`, `[attribute]`, `.class`, and `:not()`.
Does not support parent-child relationship selectors. | | providers: [   MyService,   { provide: … } ] | List of dependency injection providers for this directive and its children. | | Component configuration
`@Component` extends `@Directive`, so the `@Directive` configuration applies to components as well | Details | |:--- |:--- | | viewProviders: [MyService, { provide: … }] | List of dependency injection providers scoped to this component's view. | | template: 'Hello {{name}}' templateUrl: 'my-component.html' | Inline template or external template URL of the component's view. | | styles: ['.primary {color: red}'] styleUrls: ['my-component.css'] | List of inline CSS styles or external stylesheet URLs for styling the component's view. | | Class field decorators for directives and components | Details | |:--- |:--- | | import { Input, … } from '@angular/core'; | Import `Input, ...` from `@angular/core`. | | @Input() myProperty; | Declares an input property that you can update using property binding \(example: ``\). | | @Output() myEvent = new EventEmitter(); | Declares an output property that fires events that you can subscribe to with an event binding \(example: ``\). | | @HostBinding('class.valid') isValid; | Binds a host element property \(here, the CSS class `valid`\) to a directive/component property \(`isValid`\). | | @HostListener('click', ['$event']) onClick(e) {…} | Subscribes to a host element event \(`click`\) with a directive/component method \(`onClick`\), optionally passing an argument \(`$event`\). | | @ContentChild(myPredicate) myChildComponent; | Binds the first result of the component content query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. | | @ContentChildren(myPredicate) myChildComponents; | Binds the results of the component content query \(`myPredicate`\) to a property \(`myChildComponents`\) of the class. | | @ViewChild(myPredicate) myChildComponent; | Binds the first result of the component view query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. Not available for directives. | | @ViewChildren(myPredicate) myChildComponents; | Binds the results of the component view query \(`myPredicate`\) to a property \(`myChildComponents`\) of the class. Not available for directives. | | Directive and component change detection and lifecycle hooks \(implemented as class methods\) | Details | |:--- |:--- | | constructor(myService: MyService, …) { … } | Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. | | ngOnChanges(changeRecord) { … } | Called after every change to input properties and before processing content or child views. | | ngOnInit() { … } | Called after the constructor, initializing input properties, and the first call to `ngOnChanges`. | | ngDoCheck() { … } | Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. | | ngAfterContentInit() { … } | Called after `ngOnInit` when the component's or directive's content has been initialized. | | ngAfterContentChecked() { … } | Called after every check of the component's or directive's content. | | ngAfterViewInit() { … } | Called after `ngAfterContentInit` when the component's views and child views / the view that a directive is in has been initialized. | | ngAfterViewChecked() { … } | Called after every check of the component's views and child views / the view that a directive is in. | | ngOnDestroy() { … } | Called once, before the instance is destroyed. | | Dependency injection configuration | Details | |:--- |:--- | | { provide: MyService, useClass: MyMockService } | Sets or overrides the provider for `MyService` to the `MyMockService` class. | | { provide: MyService, useFactory: myFactory } | Sets or overrides the provider for `MyService` to the `myFactory` factory function. | | { provide: MyValue, useValue: 41 } | Sets or overrides the provider for `MyValue` to the value `41`. | | Routing and navigation | Details | |:--- |:--- | | import { Routes, RouterModule, … } from '@angular/router'; | Import `Routes, RouterModule, ...` from `@angular/router`. | | const routes: Routes = [   { path: '', component: HomeComponent },   { path: 'path/:routeParam', component: MyComponent },   { path: 'staticPath', component: … },   { path: '**', component: … },   { path: 'oldPath', redirectTo: '/staticPath' },   { path: …, component: …, data: { message: 'Custom' } } ]); const routing = RouterModule.forRoot(routes); | Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. | | <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> | Marks the location to load the component of the active route. | | <a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor"> | Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the `/` prefix; for a child route, use the `./`prefix; for a sibling or parent, use the `../` prefix. | | <a [routerLink]="[ '/path' ]" routerLinkActive="active"> | The provided classes are added to the element when the `routerLink` becomes the current active route. | | <a [routerLink]="[ '/path' ]" routerLinkActive="active" ariaCurrentWhenActive="page"> | The provided classes and `aria-current` attribute are added to the element when the `routerLink` becomes the current active route. | | function canActivateGuard: CanActivateFn =   (     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot   ) => { … } { path: …, canActivate: [canActivateGuard] } | An interface for defining a function that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. | | function canDeactivateGuard: CanDeactivateFn<T> =   (     component: T,     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot   ) => { … } { path: …, canDeactivate: [canDeactivateGuard] } | An interface for defining a function that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. | | function canActivateChildGuard: CanActivateChildFn =   (     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot   ) => { … } { path: …, canActivateChild: [canActivateGuard], children: … } | An interface for defining a function that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. | | function resolveGuard implements ResolveFn<T> =   (     route: ActivatedRouteSnapshot,     state: RouterStateSnapshot   ) => { … } { path: …, resolve: [resolveGuard] } | An interface for defining a function that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. | | function canLoadGuard: CanLoadFn =   (     route: Route   ) => { … } { path: …, canLoad: [canLoadGuard], loadChildren: … } | An interface for defining a function that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. |
@reviewed 2022-02-28