20. Quick Reference

Bootstrapping:

import { platformBrowserDynamic } from '@angular-platform-browser-dynamic';

Bootstrap the app using the root component from the specified NgModule:

platformBrowserDynamic.bootstrapModule(AppModule);

NgModule:

import { NgModule } from '@angular/core';

Define a module that contains components, directives, pipes and providers:

@NgModule({
    declarations: [ ... ],
    imports: [ ... ],
    exports: [ ... ],
    providers: [ ... ],
    entryComponents: [ ... ],
    bootstrap: [ ... ]
})
export class MyModule { }

List of components, directives and pipes that belong to this module:

declarations: [ MyRedComponent, MyBlueDirective, MyDatePipe ]

List of modules to import into this module, everything from the imported modules is available to declarations of this module:

imports: [ BrowserModule, MyNewOtherModule, SomeOtherModule ]

List of components, directives and pipes visible to modules that import this module:

exports: [ MyRedComponent, MyDatePipe ]

List of dependency injection providers visible both to the contents of this module and to importers of this module:

providers: [ MyService, { provide: ... } ]

List of components to bootstrap when this module is bootstrapped:

bootstrap: [ MyAppComponent ]

Template Syntax

Bind property value to the result of expression firstName:

<input [value]="firstName">

Bind attribute role to result of expression myAriaRole:

<div [attr.role]="myAriaRole"></div>

Bind presence of CSS class extra-sparkle on element to truthiness of expression isDelightful:

<div [class.extra-sparkle]="isDelightful">my polymer princess is my world, a beautiful world.</div>

Bind style property width to result of expression mySize in pixels. Units are optional:

<div [style.width.px]="mySize">Hello World</div>

Calls method readRainbow when click event is triggered on this button element (or its children) and passes in the event object:

<button (click)="readRainbow($event)">ReadMe</button>

Binds property to an interpolated string:

            <div title="Hello {{ wifeName }}"></div>
            <div [title]="'Hello ' + wifeName"></div>

Binds text content to an interpolated string, for example, "Hello Keras":

<p>Hello {{ wifeName }}</p>

Sets up two-way data binding:

<my-cmp [(title)]="name"></my-cmp>
<my-cmp [title]="name" (titleChange)="name=$event"></my-cmp>

Create local variable, template reference variable, movieplayer that provides access to the video element instance in data-binding and event binding expressions in the current template:

  <video src="https://www.youtube.com/watch?v=ZNTsdaZiqP8" type="video/mp4" #movieplayer>
            <button (click)="movieplayer.play()">Play</button>
            </video>

The * symbol turns the current element into an embedded template:

<p *myUnless="myExpression">...</p>
// equivalent to
<ng-template [myUnless]="myExpression">
<p>...</p>
</ng-template>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter:

<p>Card No.: {{ cardNumber | appCardNumberFormatter }}</p>

Safe navigation operator ( ? ) means that the technology field is optional and if undefined, the rest of expression should be ignored:

<p>Technology: {{ technology?.name }}</p>

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

An svg root element is detected as an SVG element automatically, without the prefix:

    <svg>
      <rect x="0" y="0" width="100" height="100" stroke="yellow" stroke-width="4" fill="red" />
    </svg>

Built-in directives

Removes or recreates a portion of the DOM tree based on the isActive expression:

<div *ngIf="isActive">This div will show because isActive is true</div>

Turns the li element and its content into a template, and uses that to instantiate a view for each item in the list:

  <li *ngFor="let technology of technologies">

Conditionally swaps the contents of the div by selecting one of the emebedded templates based on the current value of conditionExpression:

  <div [ngSwitch]="technology?.category">
                  <ng-template [ngSwitchCase]="'SPA'">
                      Single Page Applications
                  </ng-template>
                  <ng-template [ngSwitchCase]="'Tooling'">
                      Scaffold, Build, Maintain Applications
                  </ng-template>
                  <ng-template [ngSwitchCase]="'CSS Framework'">
                      Prebuilt Components, Layout and Themes
                  </ng-template>
                  <ng-template ngSwitchDefault>HTML6</ng-template>
            </div>

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 [ngClass]="{'active': isActive, 'disabled': isDisabled}">
            hello baby!
</div>

Forms

import { FormsModule } from '@angular/forms';

Provides two-way data binding, parsing, and validation for form controls:

<input [(ngModel)]="yourName"> {{ yourName }}