angular-cn/public/docs/ts/latest/guide/cheatsheet.json

{
  "currentEnvironment": "TypeScript",
  "version": {
    "raw": "2.3.0-beta.0",
    "major": 2,
    "minor": 3,
    "patch": 0,
    "prerelease": [
      "local"
    ],
    "build": "sha.dfe65b3",
    "version": "2.3.0-local",
    "codeName": "snapshot",
    "isSnapshot": true,
    "full": "2.3.0-local+sha.dfe65b3",
    "branch": "master",
    "commitSHA": "dfe65b3ddbf365abd5b2e0a0b1f5972e38b8bc1c"
  },
  "sections": [
    {
      "name": "Bootstrapping",
      "description": "<p><code>import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "platformBrowserDynamic().bootstrapModule(AppModule);",
          "bold": [
            "platformBrowserDynamic().bootstrapModule"
          ],
          "description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n"
        }
      ],
      "index": 0
    },
    {
      "name": "NgModules",
      "description": "<p><code>import { NgModule } from &#39;@angular/core&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "@NgModule({ declarations: ..., imports: ...,\n     exports: ..., providers: ..., bootstrap: ...})\nclass MyModule {}",
          "bold": [
            "NgModule"
          ],
          "description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
        },
        {
          "syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
          "bold": [
            "declarations:"
          ],
          "description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
        },
        {
          "syntax": "imports: [BrowserModule, SomeOtherModule]",
          "bold": [
            "imports:"
          ],
          "description": "<p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n"
        },
        {
          "syntax": "exports: [MyRedComponent, MyDatePipe]",
          "bold": [
            "exports:"
          ],
          "description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
        },
        {
          "syntax": "providers: [MyService, { provide: ... }]",
          "bold": [
            "providers:"
          ],
          "description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
        },
        {
          "syntax": "bootstrap: [MyAppComponent]",
          "bold": [
            "bootstrap:"
          ],
          "description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
        }
      ],
      "index": 1
    },
    {
      "name": "Template syntax",
      "description": "",
      "items": [
        {
          "syntax": "<input [value]=\"firstName\">",
          "bold": [
            "[value]"
          ],
          "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
        },
        {
          "syntax": "<div [attr.role]=\"myAriaRole\">",
          "bold": [
            "[attr.role]"
          ],
          "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
        },
        {
          "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
          "bold": [
            "[class.extra-sparkle]"
          ],
          "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
        },
        {
          "syntax": "<div [style.width.px]=\"mySize\">",
          "bold": [
            "[style.width.px]"
          ],
          "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
        },
        {
          "syntax": "<button (click)=\"readRainbow($event)\">",
          "bold": [
            "(click)"
          ],
          "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
        },
        {
          "syntax": "<div title=\"Hello {{ponyName}}\">",
          "bold": [
            "{{ponyName}}"
          ],
          "description": "<p>Binds a property to an interpolated string, for example, &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello &#39; + ponyName&quot;&gt;</code></p>\n"
        },
        {
          "syntax": "<p>Hello {{ponyName}}</p>",
          "bold": [
            "{{ponyName}}"
          ],
          "description": "<p>Binds text content to an interpolated string, for example, &quot;Hello Seabiscuit&quot;.</p>\n"
        },
        {
          "syntax": "<my-cmp [(title)]=\"name\">",
          "bold": [
            "[(title)]"
          ],
          "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
        },
        {
          "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
          "bold": [
            "#movieplayer",
            "(click)"
          ],
          "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
        },
        {
          "syntax": "<p *myUnless=\"myExpression\">...</p>",
          "bold": [
            "*myUnless"
          ],
          "description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code>&lt;template [myUnless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
        },
        {
          "syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
          "bold": [
            "{{cardNumber | myCardNumberFormatter}}"
          ],
          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
        },
        {
          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
          "bold": [
            "{{employer?.companyName}}"
          ],
          "description": "<p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
        },
        {
          "syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
          "bold": [
            "svg:"
          ],
          "description": "<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n"
        },
        {
          "syntax": "<svg>\n  <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
          "bold": [
            "svg"
          ],
          "description": "<p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
        }
      ],
      "index": 2
    },
    {
      "name": "Built-in directives",
      "description": "<p><code>import { CommonModule } from &#39;@angular/common&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "<section *ngIf=\"showSection\">",
          "bold": [
            "*ngIf"
          ],
          "description": "<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n"
        },
        {
          "syntax": "<li *ngFor=\"let item of list\">",
          "bold": [
            "*ngFor"
          ],
          "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
        },
        {
          "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchCase]=\"case1Exp\">...</template>\n  <template ngSwitchCase=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
          "bold": [
            "[ngSwitch]",
            "[ngSwitchCase]",
            "ngSwitchCase",
            "ngSwitchDefault"
          ],
          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>\n"
        },
        {
          "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
          "bold": [
            "[ngClass]"
          ],
          "description": "<p>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.</p>\n"
        }
      ],
      "index": 3
    },
    {
      "name": "Forms",
      "description": "<p><code>import { FormsModule } from &#39;@angular/forms&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "<input [(ngModel)]=\"userName\">",
          "bold": [
            "[(ngModel)]"
          ],
          "description": "<p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n"
        }
      ],
      "index": 4
    },
    {
      "name": "Class decorators",
      "description": "<p><code>import { Directive, ... } from &#39;@angular/core&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "@Component({...})\nclass MyComponent() {}",
          "bold": [
            "@Component({...})"
          ],
          "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
        },
        {
          "syntax": "@Directive({...})\nclass MyDirective() {}",
          "bold": [
            "@Directive({...})"
          ],
          "description": "<p>Declares that a class is a directive and provides metadata about the directive.</p>\n"
        },
        {
          "syntax": "@Pipe({...})\nclass MyPipe() {}",
          "bold": [
            "@Pipe({...})"
          ],
          "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
        },
        {
          "syntax": "@Injectable()\nclass MyService() {}",
          "bold": [
            "@Injectable()"
          ],
          "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
        }
      ],
      "index": 5
    },
    {
      "name": "Directive configuration",
      "description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
      "items": [
        {
          "syntax": "selector: '.cool-button:not(a)'",
          "bold": [
            "selector:"
          ],
          "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
        },
        {
          "syntax": "providers: [MyService, { provide: ... }]",
          "bold": [
            "providers:"
          ],
          "description": "<p>List of dependency injection providers for this directive and its children.</p>\n"
        }
      ],
      "index": 6
    },
    {
      "name": "Component configuration",
      "description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
      "items": [
        {
          "syntax": "moduleId: module.id",
          "bold": [
            "moduleId:"
          ],
          "description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
        },
        {
          "syntax": "viewProviders: [MyService, { provide: ... }]",
          "bold": [
            "viewProviders:"
          ],
          "description": "<p>List of dependency injection providers scoped to this component&#39;s view.</p>\n"
        },
        {
          "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
          "bold": [
            "template:",
            "templateUrl:"
          ],
          "description": "<p>Inline template or external template URL of the component&#39;s view.</p>\n"
        },
        {
          "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
          "bold": [
            "styles:",
            "styleUrls:"
          ],
          "description": "<p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>\n"
        }
      ],
      "index": 7
    },
    {
      "name": "Class field decorators for directives and components",
      "description": "<p><code>import { Input, ... } from &#39;@angular/core&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "@Input() myProperty;",
          "bold": [
            "@Input()"
          ],
          "description": "<p>Declares an input property that you can update via property binding (example:\n<code>&lt;my-cmp [myProperty]=&quot;someExpression&quot;&gt;</code>).</p>\n"
        },
        {
          "syntax": "@Output() myEvent = new EventEmitter();",
          "bold": [
            "@Output()"
          ],
          "description": "<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
        },
        {
          "syntax": "@HostBinding('[class.valid]') isValid;",
          "bold": [
            "@HostBinding('[class.valid]')"
          ],
          "description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
        },
        {
          "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
          "bold": [
            "@HostListener('click', ['$event'])"
          ],
          "description": "<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n"
        },
        {
          "syntax": "@ContentChild(myPredicate) myChildComponent;",
          "bold": [
            "@ContentChild(myPredicate)"
          ],
          "description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
        },
        {
          "syntax": "@ContentChildren(myPredicate) myChildComponents;",
          "bold": [
            "@ContentChildren(myPredicate)"
          ],
          "description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
        },
        {
          "syntax": "@ViewChild(myPredicate) myChildComponent;",
          "bold": [
            "@ViewChild(myPredicate)"
          ],
          "description": "<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>\n"
        },
        {
          "syntax": "@ViewChildren(myPredicate) myChildComponents;",
          "bold": [
            "@ViewChildren(myPredicate)"
          ],
          "description": "<p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n"
        }
      ],
      "index": 8
    },
    {
      "name": "Directive and component change detection and lifecycle hooks",
      "description": "<p>(implemented as class methods)\n</p>\n",
      "items": [
        {
          "syntax": "constructor(myService: MyService, ...) { ... }",
          "bold": [
            "constructor(myService: MyService, ...)"
          ],
          "description": "<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
        },
        {
          "syntax": "ngOnChanges(changeRecord) { ... }",
          "bold": [
            "ngOnChanges(changeRecord)"
          ],
          "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
        },
        {
          "syntax": "ngOnInit() { ... }",
          "bold": [
            "ngOnInit()"
          ],
          "description": "<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n"
        },
        {
          "syntax": "ngDoCheck() { ... }",
          "bold": [
            "ngDoCheck()"
          ],
          "description": "<p>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.</p>\n"
        },
        {
          "syntax": "ngAfterContentInit() { ... }",
          "bold": [
            "ngAfterContentInit()"
          ],
          "description": "<p>Called after <code>ngOnInit</code> when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
        },
        {
          "syntax": "ngAfterContentChecked() { ... }",
          "bold": [
            "ngAfterContentChecked()"
          ],
          "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
        },
        {
          "syntax": "ngAfterViewInit() { ... }",
          "bold": [
            "ngAfterViewInit()"
          ],
          "description": "<p>Called after <code>ngAfterContentInit</code> when the component&#39;s view has been initialized. Applies to components only.</p>\n"
        },
        {
          "syntax": "ngAfterViewChecked() { ... }",
          "bold": [
            "ngAfterViewChecked()"
          ],
          "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
        },
        {
          "syntax": "ngOnDestroy() { ... }",
          "bold": [
            "ngOnDestroy()"
          ],
          "description": "<p>Called once, before the instance is destroyed.</p>\n"
        }
      ],
      "index": 9
    },
    {
      "name": "Dependency injection configuration",
      "description": "",
      "items": [
        {
          "syntax": "{ provide: MyService, useClass: MyMockService }",
          "bold": [
            "provide",
            "useClass"
          ],
          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
        },
        {
          "syntax": "{ provide: MyService, useFactory: myFactory }",
          "bold": [
            "provide",
            "useFactory"
          ],
          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
        },
        {
          "syntax": "{ provide: MyValue, useValue: 41 }",
          "bold": [
            "provide",
            "useValue"
          ],
          "description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
        }
      ],
      "index": 10
    },
    {
      "name": "Routing and navigation",
      "description": "<p><code>import { Routes, RouterModule, ... } from &#39;@angular/router&#39;;</code>\n</p>\n",
      "items": [
        {
          "syntax": "const routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'path/:routeParam', component: MyComponent },\n  { path: 'staticPath', component: ... },\n  { path: '**', component: ... },\n  { path: 'oldPath', redirectTo: '/staticPath' },\n  { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nconst routing = RouterModule.forRoot(routes);",
          "bold": [
            "Routes"
          ],
          "description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
        },
        {
          "syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
          "bold": [
            "router-outlet"
          ],
          "description": "<p>Marks the location to load the component of the active route.</p>\n"
        },
        {
          "syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
          "bold": [
            "[routerLink]"
          ],
          "description": "<p>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 <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n"
        },
        {
          "syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
          "bold": [],
          "description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
        },
        {
          "syntax": "class CanActivateGuard implements CanActivate {\n    canActivate(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
          "bold": [
            "CanActivate"
          ],
          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
        },
        {
          "syntax": "class CanDeactivateGuard implements CanDeactivate<T> {\n    canDeactivate(\n      component: T,\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
          "bold": [
            "CanDeactivate"
          ],
          "description": "<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
        },
        {
          "syntax": "class CanActivateChildGuard implements CanActivateChild {\n    canActivateChild(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard],\n    children: ... }",
          "bold": [
            "CanActivateChild"
          ],
          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
        },
        {
          "syntax": "class ResolveGuard implements Resolve<T> {\n    resolve(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<any>|Promise<any>|any { ... }\n}\n\n{ path: ..., resolve: [ResolveGuard] }",
          "bold": [
            "Resolve"
          ],
          "description": "<p>An interface for defining a class 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.</p>\n"
        },
        {
          "syntax": "class CanLoadGuard implements CanLoad {\n    canLoad(\n      route: Route\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
          "bold": [
            "CanLoad"
          ],
          "description": "<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
        }
      ],
      "index": 11
    }
  ]
}