build(aio): move doc-gen stuff from angular.io (#14097)

docs/content/cheatsheet/bootstrapping.md

@@ -0,0 +1,18 @@
+@cheatsheetSection
+Bootstrapping
+@cheatsheetIndex 0
+@description
+{@target ts}`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';`{@endtarget}
+{@target js}Available from the `ng.platformBrowserDynamic` namespace{@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`platformBrowserDynamic().bootstrapModule(AppModule);`|`platformBrowserDynamic().bootstrapModule`
+syntax(js):
+`document.addEventListener('DOMContentLoaded', function() {
+  ng.platformBrowserDynamic
+    .platformBrowserDynamic()
+    .bootstrapModule(app.AppModule);
+});`|`platformBrowserDynamic().bootstrapModule`
+description:
+Bootstraps the app, using the root component from the specified `NgModule`. {@target js}Must be wrapped in the event listener to fire when the page loads.{@endtarget}

docs/content/cheatsheet/built-in-directives.md

@@ -0,0 +1,34 @@
+@cheatsheetSection
+Built-in directives
+@cheatsheetIndex 3
+@description
+{@target ts}`import { CommonModule } from '@angular/common';`{@endtarget}
+{@target js}Available using the `ng.common.CommonModule` module{@endtarget}
+
+@cheatsheetItem
+syntax:
+`<section *ngIf="showSection">`|`*ngIf`
+description:
+Removes or recreates a portion of the DOM tree based on the `showSection` expression.
+
+@cheatsheetItem
+syntax:
+`<li *ngFor="let item of list">`|`*ngFor`
+description:
+Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
+
+@cheatsheetItem
+syntax:
+`<div [ngSwitch]="conditionExpression">
+  <template [ngSwitchCase]="case1Exp">...</template>
+  <template ngSwitchCase="case2LiteralString">...</template>
+  <template ngSwitchDefault>...</template>
+</div>`|`[ngSwitch]`|`[ngSwitchCase]`|`ngSwitchCase`|`ngSwitchDefault`
+description:
+Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of `conditionExpression`.
+
+@cheatsheetItem
+syntax:
+`<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
+description:
+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.

docs/content/cheatsheet/class-decorators.md

@@ -0,0 +1,49 @@
+@cheatsheetSection
+Class decorators
+@cheatsheetIndex 5
+@description
+{@target ts}`import { Directive, ... } from '@angular/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`@Component({...})
+class MyComponent() {}`|`@Component({...})`
+syntax(js):
+`var MyComponent = ng.core.Component({...}).Class({...})`|`ng.core.Component({...})`
+description:
+Declares that a class is a component and provides metadata about the component.
+
+@cheatsheetItem
+syntax(ts):
+`@Directive({...})
+class MyDirective() {}`|`@Directive({...})`
+syntax(js):
+`var MyDirective = ng.core.Directive({...}).Class({...})`|`ng.core.Directive({...})`
+description:
+Declares that a class is a directive and provides metadata about the directive.
+
+@cheatsheetItem
+syntax(ts):
+`@Pipe({...})
+class MyPipe() {}`|`@Pipe({...})`
+syntax(js):
+`var MyPipe = ng.core.Pipe({...}).Class({...})`|`ng.core.Pipe({...})`
+description:
+Declares that a class is a pipe and provides metadata about the pipe.
+
+@cheatsheetItem
+syntax(ts):
+`@Injectable()
+class MyService() {}`|`@Injectable()`
+syntax(js):
+`var OtherService = ng.core.Class(
+    {constructor: function() { }});
+var MyService = ng.core.Class(
+    {constructor: [OtherService, function(otherService) { }]});`|`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`
+description:
+{@target ts}Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+{@endtarget}
+{@target js}
+Declares a service to inject into a class by providing an array with the services, with the final item being the function to receive the injected services.
+{@endtarget}

docs/content/cheatsheet/component-configuration.md

@@ -0,0 +1,38 @@
+@cheatsheetSection
+Component configuration
+@cheatsheetIndex 7
+@description
+{@target js}`ng.core.Component` extends `ng.core.Directive`,
+so the `ng.core.Directive` configuration applies to components as well{@endtarget}
+{@target ts}`@Component` extends `@Directive`,
+so the `@Directive` configuration applies to components as well{@endtarget}
+
+@cheatsheetItem
+syntax:
+`moduleId: module.id`|`moduleId:`
+description:
+If set, the `templateUrl` and `styleUrl` are resolved relative to the component.
+
+@cheatsheetItem
+syntax(ts):
+`viewProviders: [MyService, { provide: ... }]`|`viewProviders:`
+syntax(js):
+`viewProviders: [MyService, { provide: ... }]`|`viewProviders:`
+description:
+List of dependency injection providers scoped to this component's view.
+
+
+@cheatsheetItem
+syntax:
+`template: 'Hello {{name}}'
+templateUrl: 'my-component.html'`|`template:`|`templateUrl:`
+description:
+Inline template or external template URL of the component's view.
+
+
+@cheatsheetItem
+syntax:
+`styles: ['.primary {color: red}']
+styleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
+description:
+List of inline CSS styles or external stylesheet URLs for styling the component’s view.

docs/content/cheatsheet/dependency-injection.md

@@ -0,0 +1,30 @@
+@cheatsheetSection
+Dependency injection configuration
+@cheatsheetIndex 10
+@description
+
+@cheatsheetItem
+syntax(ts):
+`{ provide: MyService, useClass: MyMockService }`|`provide`|`useClass`
+syntax(js):
+`{ provide: MyService, useClass: MyMockService }`|`provide`|`useClass`
+description:
+Sets or overrides the provider for `MyService` to the `MyMockService` class.
+
+
+@cheatsheetItem
+syntax(ts):
+`{ provide: MyService, useFactory: myFactory }`|`provide`|`useFactory`
+syntax(js):
+`{ provide: MyService, useFactory: myFactory }`|`provide`|`useFactory`
+description:
+Sets or overrides the provider for `MyService` to the `myFactory` factory function.
+
+
+@cheatsheetItem
+syntax(ts):
+`{ provide: MyValue, useValue: 41 }`|`provide`|`useValue`
+syntax(js):
+`{ provide: MyValue, useValue: 41 }`|`provide`|`useValue`
+description:
+Sets or overrides the provider for `MyValue` to the value `41`.

docs/content/cheatsheet/directive-and-component-decorators.md

@@ -0,0 +1,86 @@
+@cheatsheetSection
+Class field decorators for directives and components
+@cheatsheetIndex 8
+@description
+{@target ts}`import { Input, ... } from '@angular/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`@Input() myProperty;`|`@Input()`
+syntax(js):
+`ng.core.Input(myProperty, myComponent);`|`ng.core.Input(`|`);`
+description:
+Declares an input property that you can update via property binding (example:
+`<my-cmp [myProperty]="someExpression">`).
+
+
+@cheatsheetItem
+syntax(ts):
+`@Output() myEvent = new EventEmitter();`|`@Output()`
+syntax(js):
+`myEvent = new ng.core.EventEmitter();
+ng.core.Output(myEvent, myComponent);`|`ng.core.Output(`|`);`
+description:
+Declares an output property that fires events that you can subscribe to with an event binding (example: `<my-cmp (myEvent)="doSomething()">`).
+
+
+@cheatsheetItem
+syntax(ts):
+`@HostBinding('class.valid') isValid;`|`@HostBinding('class.valid')`
+syntax(js):
+`ng.core.HostBinding('class.valid',
+    'isValid', myComponent);`|`ng.core.HostBinding('class.valid', 'isValid'`|`);`
+description:
+Binds a host element property (here, the CSS class `valid`) to a directive/component property (`isValid`).
+
+
+
+@cheatsheetItem
+syntax(ts):
+`@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
+syntax(js):
+`ng.core.HostListener('click',
+    ['$event'], onClick(e) {...}, myComponent);`|`ng.core.HostListener('click', ['$event'], onClick(e)`|`);`
+description:
+Subscribes to a host element event (`click`) with a directive/component method (`onClick`), optionally passing an argument (`$event`).
+
+
+@cheatsheetItem
+syntax(ts):
+`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
+syntax(js):
+`ng.core.ContentChild(myPredicate,
+    'myChildComponent', myComponent);`|`ng.core.ContentChild(myPredicate,`|`);`
+description:
+Binds the first result of the component content query (`myPredicate`) to a property (`myChildComponent`) of the class.
+
+
+@cheatsheetItem
+syntax(ts):
+`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
+syntax(js):
+`ng.core.ContentChildren(myPredicate,
+    'myChildComponents', myComponent);`|`ng.core.ContentChildren(myPredicate,`|`);`
+description:
+Binds the results of the component content query (`myPredicate`) to a property (`myChildComponents`) of the class.
+
+
+@cheatsheetItem
+syntax(ts):
+`@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
+syntax(js):
+`ng.core.ViewChild(myPredicate,
+    'myChildComponent', myComponent);`|`ng.core.ViewChild(myPredicate,`|`);`
+description:
+Binds the first result of the component view query (`myPredicate`) to a property (`myChildComponent`) of the class. Not available for directives.
+
+
+@cheatsheetItem
+syntax(ts):
+`@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
+syntax(js):
+`ng.core.ViewChildren(myPredicate,
+    'myChildComponents', myComponent);`|`ng.core.ViewChildren(myPredicate,`|`);`
+description:
+Binds the results of the component view query (`myPredicate`) to a property (`myChildComponents`) of the class. Not available for directives.

docs/content/cheatsheet/directive-configuration.md

@@ -0,0 +1,23 @@
+@cheatsheetSection
+Directive configuration
+@cheatsheetIndex 6
+@description
+{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
+{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget}
+
+@cheatsheetItem
+syntax:
+`selector: '.cool-button:not(a)'`|`selector:`
+description:
+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.
+
+@cheatsheetItem
+syntax(ts):
+`providers: [MyService, { provide: ... }]`|`providers:`
+syntax(js):
+`providers: [MyService, { provide: ... }]`|`providers:`
+description:
+List of dependency injection providers for this directive and its children.

docs/content/cheatsheet/forms.md

@@ -0,0 +1,12 @@
+@cheatsheetSection
+Forms
+@cheatsheetIndex 4
+@description
+{@target ts}`import { FormsModule } from '@angular/forms';`{@endtarget}
+{@target js}Available using the `ng.forms.FormsModule` module{@endtarget}
+
+@cheatsheetItem
+syntax:
+`<input [(ngModel)]="userName">`|`[(ngModel)]`
+description:
+Provides two-way data-binding, parsing, and validation for form controls.

docs/content/cheatsheet/lifecycle hooks.md

@@ -0,0 +1,86 @@
+@cheatsheetSection
+Directive and component change detection and lifecycle hooks
+@cheatsheetIndex 9
+@description
+{@target ts}(implemented as class methods){@endtarget}
+{@target js}(implemented as component properties){@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
+syntax(js):
+`constructor: function(MyService, ...) { ... }`|`constructor: function(MyService, ...)`
+description:
+Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
+syntax(js):
+`ngOnChanges: function(changeRecord) { ... }`|`ngOnChanges: function(changeRecord)`
+description:
+Called after every change to input properties and before processing content or child views.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngOnInit() { ... }`|`ngOnInit()`
+syntax(js):
+`ngOnInit: function() { ... }`|`ngOnInit: function()`
+description:
+Called after the constructor, initializing input properties, and the first call to `ngOnChanges`.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngDoCheck() { ... }`|`ngDoCheck()`
+syntax(js):
+`ngDoCheck: function() { ... }`|`ngDoCheck: function()`
+description:
+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.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngAfterContentInit() { ... }`|`ngAfterContentInit()`
+syntax(js):
+`ngAfterContentInit: function() { ... }`|`ngAfterContentInit: function()`
+description:
+Called after `ngOnInit` when the component's or directive's content has been initialized.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
+syntax(js):
+`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
+description:
+Called after every check of the component's or directive's content.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngAfterViewInit() { ... }`|`ngAfterViewInit()`
+syntax(js):
+`ngAfterViewInit: function() { ... }`|`ngAfterViewInit: function()`
+description:
+Called after `ngAfterContentInit` when the component's view has been initialized. Applies to components only.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`
+syntax(js):
+`ngAfterViewChecked: function() { ... }`|`ngAfterViewChecked: function()`
+description:
+Called after every check of the component's view. Applies to components only.
+
+
+@cheatsheetItem
+syntax(ts):
+`ngOnDestroy() { ... }`|`ngOnDestroy()`
+syntax(js):
+`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
+description:
+Called once, before the instance is destroyed.

docs/content/cheatsheet/ngmodules.md

@@ -0,0 +1,58 @@
+@cheatsheetSection
+NgModules
+@cheatsheetIndex 1
+@description
+{@target ts}`import { NgModule } from '@angular/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`@NgModule({ declarations: ..., imports: ...,
+     exports: ..., providers: ..., bootstrap: ...})
+class MyModule {}`|`NgModule`
+description:
+Defines a module that contains components, directives, pipes, and providers.
+
+syntax(js):
+`ng.core.NgModule({declarations: ..., imports: ...,
+     exports: ..., providers: ..., bootstrap: ...}).
+Class({ constructor: function() {}})`
+description:
+Defines a module that contains components, directives, pipes, and providers.
+
+@cheatsheetItem
+syntax:
+`declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]`|`declarations:`
+description:
+List of components, directives, and pipes that belong to this module.
+
+@cheatsheetItem
+syntax(ts):
+`imports: [BrowserModule, SomeOtherModule]`|`imports:`
+description:
+List of modules to import into this module. Everything from the imported modules
+is available to `declarations` of this module.
+
+syntax(js):
+`imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]`|`imports:`
+description:
+List of modules to import into this module. Everything from the imported modules
+is available to `declarations` of this module.
+
+@cheatsheetItem
+syntax:
+`exports: [MyRedComponent, MyDatePipe]`|`exports:`
+description:
+List of components, directives, and pipes visible to modules that import this module.
+
+@cheatsheetItem
+syntax:
+`providers: [MyService, { provide: ... }]`|`providers:`
+description:
+List of dependency injection providers visible both to the contents of this module and to importers of this module.
+
+@cheatsheetItem
+syntax:
+`bootstrap: [MyAppComponent]`|`bootstrap:`
+description:
+List of components to bootstrap when this module is bootstrapped.

docs/content/cheatsheet/routing.md

@@ -0,0 +1,170 @@
+@cheatsheetSection
+Routing and navigation
+@cheatsheetIndex 11
+@description
+{@target ts}`import { Routes, RouterModule, ... } from '@angular/router';`{@endtarget}
+{@target js}Available from the `ng.router` namespace{@endtarget}
+
+
+@cheatsheetItem
+syntax(ts):
+`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);`|`Routes`
+syntax(js):
+`var routes = [
+  { path: '', component: HomeComponent },
+  { path: ':routeParam', component: MyComponent },
+  { path: 'staticPath', component: ... },
+  { path: '**', component: ... },
+  { path: 'oldPath', redirectTo: '/staticPath' },
+  { path: ..., component: ..., data: { message: 'Custom' } }
+]);
+
+var routing = ng.router.RouterModule.forRoot(routes);`|`ng.router.Routes`
+description:
+Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
+
+
+@cheatsheetItem
+syntax:
+`
+<router-outlet></router-outlet>
+<router-outlet name="aux"></router-outlet>
+`|`router-outlet`
+description:
+Marks the location to load the component of the active route.
+
+
+@cheatsheetItem
+syntax:
+`
+<a routerLink="/path">
+<a [routerLink]="[ '/path', routeParam ]">
+<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
+<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
+<a [routerLink]="[ '/path' ]" fragment="anchor">
+`|`[routerLink]`
+description:
+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.
+
+@cheatsheetItem
+syntax:
+`<a [routerLink]="[ '/path' ]" routerLinkActive="active">`
+description:
+The provided classes are added to the element when the `routerLink` becomes the current active route.
+
+@cheatsheetItem
+syntax(ts):
+`class CanActivateGuard implements CanActivate {
+    canActivate(
+      route: ActivatedRouteSnapshot,
+      state: RouterStateSnapshot
+    ): Observable<boolean>|Promise<boolean>|boolean { ... }
+}
+
+{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
+syntax(js):
+`var CanActivateGuard = ng.core.Class({
+  canActivate: function(route, state) {
+    // return Observable/Promise boolean or boolean
+  }
+});
+
+{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
+description:
+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.
+
+@cheatsheetItem
+syntax(ts):
+`class CanDeactivateGuard implements CanDeactivate<T> {
+    canDeactivate(
+      component: T,
+      route: ActivatedRouteSnapshot,
+      state: RouterStateSnapshot
+    ): Observable<boolean>|Promise<boolean>|boolean { ... }
+}
+
+{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
+syntax(js):
+`var CanDeactivateGuard = ng.core.Class({
+  canDeactivate: function(component, route, state) {
+    // return Observable/Promise boolean or boolean
+  }
+});
+
+{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
+description:
+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.
+
+@cheatsheetItem
+syntax(ts):
+`class CanActivateChildGuard implements CanActivateChild {
+    canActivateChild(
+      route: ActivatedRouteSnapshot,
+      state: RouterStateSnapshot
+    ): Observable<boolean>|Promise<boolean>|boolean { ... }
+}
+
+{ path: ..., canActivateChild: [CanActivateGuard],
+    children: ... }`|`CanActivateChild`
+syntax(js):
+`var CanActivateChildGuard = ng.core.Class({
+  canActivateChild: function(route, state) {
+    // return Observable/Promise boolean or boolean
+  }
+});
+
+{ path: ..., canActivateChild: [CanActivateChildGuard],
+    children: ... }`|`CanActivateChild`
+description:
+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.
+
+@cheatsheetItem
+syntax(ts):
+`class ResolveGuard implements Resolve<T> {
+    resolve(
+      route: ActivatedRouteSnapshot,
+      state: RouterStateSnapshot
+    ): Observable<any>|Promise<any>|any { ... }
+}
+
+{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
+syntax(js):
+`var ResolveGuard = ng.core.Class({
+  resolve: function(route, state) {
+    // return Observable/Promise value or value
+  }
+});
+
+{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
+description:
+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.
+
+@cheatsheetItem
+syntax(ts):
+`class CanLoadGuard implements CanLoad {
+    canLoad(
+      route: Route
+    ): Observable<boolean>|Promise<boolean>|boolean { ... }
+}
+
+{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }`|`CanLoad`
+syntax(js):
+`var CanLoadGuard = ng.core.Class({
+  canLoad: function(route) {
+    // return Observable/Promise boolean or boolean
+  }
+});
+
+{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }`|`CanLoad`
+description:
+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.
+

docs/content/cheatsheet/template-syntax.md

@@ -0,0 +1,94 @@
+@cheatsheetSection
+Template syntax
+@cheatsheetIndex 2
+@description
+
+@cheatsheetItem
+syntax:
+`<input [value]="firstName">`|`[value]`
+description:
+Binds property `value` to the result of expression `firstName`.
+
+@cheatsheetItem
+syntax:
+`<div [attr.role]="myAriaRole">`|`[attr.role]`
+description:
+Binds attribute `role` to the result of expression `myAriaRole`.
+
+@cheatsheetItem
+syntax:
+`<div [class.extra-sparkle]="isDelightful">`|`[class.extra-sparkle]`
+description:
+Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`.
+
+@cheatsheetItem
+syntax:
+`<div [style.width.px]="mySize">`|`[style.width.px]`
+description:
+Binds style property `width` to the result of expression `mySize` in pixels. Units are optional.
+
+@cheatsheetItem
+syntax:
+`<button (click)="readRainbow($event)">`|`(click)`
+description:
+Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object.
+
+@cheatsheetItem
+syntax:
+`<div title="Hello {{ponyName}}">`|`{{ponyName}}`
+description:
+Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
+`<div [title]="'Hello ' + ponyName">`
+
+@cheatsheetItem
+syntax:
+`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
+description:
+Binds text content to an interpolated string, for example, "Hello Seabiscuit".
+
+@cheatsheetItem
+syntax:
+`<my-cmp [(title)]="name">`|`[(title)]`
+description:
+Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`
+
+@cheatsheetItem
+syntax:
+`<video #movieplayer ...>
+  <button (click)="movieplayer.play()">
+</video>`|`#movieplayer`|`(click)`
+description:
+Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template.
+
+@cheatsheetItem
+syntax:
+`<p *myUnless="myExpression">...</p>`|`*myUnless`
+description:
+The `*` symbol turns the current element into an embedded template. Equivalent to:
+`<template [myUnless]="myExpression"><p>...</p></template>`
+
+@cheatsheetItem
+syntax:
+`<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>`|`{{cardNumber | myCardNumberFormatter}}`
+description:
+Transforms the current value of expression `cardNumber` via the pipe called `myCardNumberFormatter`.
+
+@cheatsheetItem
+syntax:
+`<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
+description:
+The safe navigation operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.
+
+@cheatsheetItem
+syntax:
+`<svg:rect x="0" y="0" width="100" height="100"/>`|`svg:`
+description:
+An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component.
+
+@cheatsheetItem
+syntax:
+`<svg>
+  <rect x="0" y="0" width="100" height="100"/>
+</svg>`|`svg`
+description:
+An `<svg>` root element is detected as an SVG element automatically, without the prefix.

docs/src/app/app.component.ts

@@ -0,0 +1,44 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+import {Component, OnInit, NgZone } from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/switchMap';
+import {QueryResults, SearchWorkerClient} from './search-worker-client';
+
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Angular Docs Search</h1>
+    <div class="search-bar"><input [formControl]="searchInput"></div>
+    <div class="search-results">
+      <div *ngIf="!(indexReady | async)">Waiting...</div>
+      <ul>
+      <li *ngFor="let result of (searchResult$ | async)">
+        <a href="{{result.path}}">{{ result.title }} ({{result.type}})</a>
+      </li>
+      </ul>
+    </div>
+  `
+})
+export class AppComponent implements OnInit {
+  searchResult$: Observable<QueryResults>;
+  indexReady: Promise<boolean>;
+  searchInput: FormControl;
+
+  constructor(private zone: NgZone) {}
+
+  ngOnInit() {
+    const searchWorker = new SearchWorkerClient('app/search-worker.js', this.zone);
+    this.indexReady = searchWorker.ready;
+    this.searchInput = new FormControl();
+    this.searchResult$ = this.searchInput.valueChanges
+      .switchMap((searchText: string) => searchWorker.search(searchText));
+  }
+}

docs/src/app/main.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveFormsModule} from '@angular/forms';
+import {AppComponent} from 'app/app.component';
+
+@NgModule({
+  imports:      [ BrowserModule, ReactiveFormsModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+class AppModule {
+
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

docs/src/app/search-worker-client.ts

@@ -0,0 +1,97 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+import {NgZone} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subscriber} from 'rxjs/Subscriber';
+import 'rxjs/add/observable/fromPromise';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/switchMap';
+
+
+export interface QueryResults {}
+
+export interface ResultsReadyMessage {
+  type: 'query-results';
+  id: number;
+  query: string;
+  results: QueryResults;
+}
+
+export class SearchWorkerClient {
+  ready: Promise<boolean>;
+  worker: Worker;
+  private _queryId = 0;
+
+  constructor(url: string, private zone: NgZone) {
+    this.worker = new Worker(url);
+    this.ready = this._waitForIndex(this.worker);
+  }
+
+  search(query: string) {
+    return Observable.fromPromise(this.ready)
+            .switchMap(() => this._createQuery(query));
+  }
+
+  private _waitForIndex(worker: Worker) {
+    return new Promise((resolve, reject) => {
+
+      worker.onmessage = (e) => {
+        if(e.data.type === 'index-ready') {
+          resolve(true);
+          cleanup();
+        }
+      };
+
+      worker.onerror = (e) => {
+        reject(e);
+        cleanup();
+      };
+    });
+
+    function cleanup() {
+      worker.onmessage = null;
+      worker.onerror = null;
+    }
+  }
+
+  private _createQuery(query: string) {
+    return new Observable<QueryResults>((subscriber: Subscriber<QueryResults>) => {
+
+      // get a new identifier for this query that we can match to results
+      const id = this._queryId++;
+
+      const handleMessage = (message: MessageEvent) => {
+        const {type, id: queryId, results} = message.data as ResultsReadyMessage;
+        if (type === 'query-results' && id === queryId) {
+          this.zone.run(() => {
+            subscriber.next(results);
+            subscriber.complete();
+          });
+        }
+      };
+
+      const handleError = (error: ErrorEvent) => {
+        this.zone.run(() => {
+          subscriber.error(error);
+        });
+      };
+
+      // Wire up the event listeners for this query
+      this.worker.addEventListener('message', handleMessage);
+      this.worker.addEventListener('error', handleError);
+
+      // Post the query to the web worker
+      this.worker.postMessage({query, id});
+
+      // At completion/error unwire the event listeners
+      return () => {
+        this.worker.removeEventListener('message', handleMessage);
+        this.worker.removeEventListener('error', handleError);
+      };
+    });
+  }
+}

docs/src/app/search-worker.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/* eslint-env worker */
+/* global importScripts, lunr */
+
+importScripts('https://unpkg.com/lunr@0.7.2');
+
+var index = createIndex();
+var pages = {};
+
+makeRequest('search-data.json', loadIndex);
+
+self.onmessage = handleMessage;
+
+// Create the lunr index - the docs should be an array of objects, each object containing
+// the path and search terms for a page
+function createIndex() {
+  return lunr(/** @this */function() {
+    this.ref('path');
+    this.field('titleWords', {boost: 50});
+    this.field('members', {boost: 40});
+    this.field('keywords', {boost: 20});
+  });
+}
+
+
+// Use XHR to make a request to the server
+function makeRequest(url, callback) {
+  var searchDataRequest = new XMLHttpRequest();
+  searchDataRequest.onload = function() {
+    callback(JSON.parse(this.responseText));
+  };
+  searchDataRequest.open('GET', url);
+  searchDataRequest.send();
+}
+
+
+// Create the search index from the searchInfo which contains the information about each page to be indexed
+function loadIndex(searchInfo) {
+  // Store the pages data to be used in mapping query results back to pages
+  // Add search terms from each page to the search index
+  searchInfo.forEach(function(page) {
+    index.add(page);
+    pages[page.path] = page;
+  });
+  self.postMessage({type: 'index-ready'});
+}
+
+
+// The worker receives a message everytime the web app wants to query the index
+function handleMessage(message) {
+  var id = message.data.id;
+  var query = message.data.query;
+  var results = queryIndex(query);
+  self.postMessage({type: 'query-results', id: id, query: query, results: results});
+}
+
+
+// Query the index and return the processed results
+function queryIndex(query) {
+  // Only return the array of paths to pages
+  return index.search(query).map(function(hit) { return pages[hit.ref]; });
+}

docs/src/app/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/tools/",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "lib": ["es6", "dom"],
+    "target": "es5",
+    "skipLibCheck": true,
+    "typeRoots": [
+      "../../../node_modules"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "typings-test",
+    "public_api_guard",
+    "docs"
+  ]
+}

docs/src/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills for older browsers -->
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+
+    <script src="https://unpkg.com/zone.js@0.7.2?main=browser"></script>
+    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
+    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
+
+    <script src="systemjs.config.web.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading AppComponent content here ...</my-app>
+  </body>
+
+</html>

docs/src/systemjs.config.web.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+System.config({
+  // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+  transpiler: 'ts',
+  typescriptOptions: {
+    // Copy of compiler options in standard tsconfig.json
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  meta: {
+    'typescript': {
+      "exports": "ts"
+    }
+  },
+  paths: {
+    // paths serve as alias
+    'npm:': 'https://unpkg.com/'
+  },
+  // map tells the System loader where to look for things
+  map: {
+    // our app is within the app folder
+    app: 'app',
+
+    // angular bundles
+    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+
+    // other libraries
+    'rxjs':                      'npm:rxjs',
+    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+    'ts':                        'npm:plugin-typescript@4.0.10/lib/plugin.js',
+    'typescript':                'npm:typescript@2.0.3/lib/typescript.js',
+
+  },
+  // packages tells the System loader how to load when no filename and/or no extension
+  packages: {
+    app: {
+      main: './main.ts',
+      defaultExtension: 'ts'
+    },
+    rxjs: {
+      defaultExtension: 'js'
+    }
+  }
+});

docs/templates/api-list-audit.template.json

@@ -0,0 +1,15 @@
+[{% for module, items in doc.data %}
+  {% for item in items %}
+    {
+      "title": "{$ item.title $}",
+      "path": "{$ item.exportDoc.path $}",
+      "docType": "{$ item.docType $}",
+      "stability": "{$ item.stability $}",
+      "secure": "{$ item.security $}",
+      "howToUse": "{$ item.howToUse | replace('"','\\"') $}",
+      "whatItDoes": {% if item.whatItDoes %}"Exists"{% else %}"Not Done"{% endif %},
+      "barrel" : "{$ module | replace("/index", "") $}"
+    }{% if not loop.last %},{% endif %}
+    {% endfor %}
+  {% endfor %}
+]

docs/templates/api-list-data.template.json

@@ -0,0 +1,14 @@
+{
+{%- for module, items in doc.data %}
+  "{$ module | replace("/index", "") $}" : [{% for item in items %}
+    {
+      "title": "{$ item.title $}",
+      "path": "{$ item.exportDoc.path $}",
+      "docType": "{$ item.docType $}",
+      "stability": "{$ item.stability $}",
+      "secure": "{$ item.security $}",
+      "barrel" : "{$ module | replace("/index", "") $}"
+    }{% if not loop.last %},{% endif %}
+  {% endfor %}]{% if not loop.last %},{% endif %}
+{% endfor -%}
+}

docs/templates/cheatsheet.template.json

@@ -0,0 +1,5 @@
+{
+  "currentEnvironment": {$ doc.currentEnvironment | json | trim $},
+  "version": {$ doc.version.currentVersion | json | indent(2) | trim $},
+  "sections": {$ doc.sections | json | indent(2) | trim $}
+}

docs/templates/class.template.html

@@ -0,0 +1,161 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Overview</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <code class="no-bg api-doc-code openParens">class {$ doc.name $} {</code>
+    {% if doc.statics.length %}
+    <div layout="column">
+      {% for member in doc.statics %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent">static
+          <a class="code-anchor" href="#{$ member.name $}-anchor">
+            <code(class="code-background api-doc-code">{$ member.name | indent(6, false) | trim $}</code>
+          </a>
+          <code class="api-doc-code">
+            {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+          </code>
+      {% endif %}{% endfor %}
+    {% endif %}
+    {% if doc.constructorDoc.name %}
+    <div layout="column">
+      <pre class="prettyprint no-bg-with-indent">
+        <a class="code-anchor" href="#constructor">
+          <code class="code-background api-doc-code">{$ doc.constructorDoc.name $}</code>
+        </a>
+        <code class="api-doc-code">
+          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+        </code>
+    {% endif %}
+    {% if doc.members.length %}
+    <div layout="column">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent">
+          <a class="code-anchor" href="#{$ member.name $}-anchor">
+            <code class="code-background api-doc-code">{$ member.name | indent(6, false) | trim $}</code>
+          </a>
+          <code class="api-doc-code">{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+        </pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+    <p class="selector endParens">
+      <code class="api-doc-code no-bg">}</code>
+    </p>
+
+{% block additional %}
+{% endblock %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Description</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if doc.description.length > 2 %}
+    {$ doc.description | trimBlankLines | marked $}
+    {% endif %}
+  </div>
+
+{%- if doc.decorators.length %}
+{% block annotations %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Annotations</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {%- for decorator in doc.decorators %}
+      <pre class="prettyprint no-bg">
+        <code class="api-doc-code">
+          @{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}
+        </code>
+      </pre>
+      {%- if not decorator.notYetDocumented %}
+      {$ decorator.description | indentForMarkdown(8) | trimBlankLines | marked $}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endblock %}
+{% endif %}
+
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Constructor</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <a name="constructor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
+      <code class="api-doc-code">
+        {$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+      </code>
+    </pre>
+    {%- if not doc.constructorDoc.notYetDocumented %}
+    {$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif %}
+{% endif %}
+
+{% if doc.statics.length %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Static Members</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+  {% for member in doc.statics %}{% if not member.internal %}
+    <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code class="api-doc-code">
+        {$ member.name $}{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+      </code>
+    </pre>
+    {%- if not member.notYetDocumented %}
+    {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif %}
+
+    {% if not loop.last %}
+    <hr class="hr-margin">
+    {% endif %}
+
+  {% endif %}{% endfor %}
+{% endif %}
+
+{% if doc.members.length %}
+<div layout="row" layout-xs="column" class="instance-members" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Details</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {% for member in doc.members %}{% if not member.internal %}
+    <a name="{$ member.name $}-anchor" class="anchor-offset">
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code class="api-doc-code">
+        {$ member.name $}{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+      </code>
+    </pre>
+    {%- if not member.notYetDocumented %}
+    {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif -%}
+
+    {% if not loop.last %}
+    <hr class="hr-margin">
+    {% endif %}
+  {% endif %}{% endfor %}
+{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} },
+  defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/const.template.html

@@ -0,0 +1 @@
+{% extends 'var.template.html' -%}

docs/templates/data-module.template.js

@@ -0,0 +1 @@
+export const {$ doc.serviceName $} = {$ doc.value | json $};

docs/templates/decorator.template.html

@@ -0,0 +1,44 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' %}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Description</h2>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if not doc.notYetDocumented %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+  </div>
+</div>
+{% if doc.metadataDoc and doc.metadataDoc.members.length %}
+<div layout="row" layout-xs="column" class="metadata" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Metadata Properties</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {% for metadata in doc.metadataDoc.members %}{% if not metadata.internal %}
+    <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ metadata.name $}') }">
+      <code class="api-doc-code">
+        {$ metadata.name $}{$ params.paramList(metadata.parameters) | indent(8, false) | trim $}{$ params.returnType(metadata.returnType) $}
+      </code>
+    </pre>
+    {%- if not metadata.notYetDocumented %}{$ metadata.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}{% endif -%}
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/directive.template.html

@@ -0,0 +1,62 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'class.template.html' -%}
+
+{% block annotations %}
+{% endblock %}
+
+{% block additional -%}
+
+{%- if doc.directiveOptions.selector.split(',').length %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Selectors</h2>
+  <div flex="80" flex-xs="100">
+    {% for selector in doc.directiveOptions.selector.split(',') %}
+    <p class="selector">
+      <code>{$ selector $}</code>
+    </p>
+    {% endfor %}
+{% endif %}
+
+{% if doc.outputs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Outputs</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+  {% for binding, property in doc.outputs %}
+    <div class="code-margin">
+      <code>{$ property.bindingName $}&nbsp;bound to&nbsp;</code>
+      <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code
+    </div>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if doc.inputs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Inputs</h2>
+  <div flex="80" flex-xs="100">
+    {% for binding, property in doc.inputs %}
+    <div class="code-margin">
+      <code>{$ property.bindingName $}&nbsp;bound to&nbsp;</code>
+      <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
+    {% endfor %}
+{% endif %}
+
+{%- if doc.directiveOptions.exportAs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Exported as</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <p class="input">
+      <code>{$ doc.directiveOptions.exportAs $}</code>
+    </p>
+{% endif %}
+{% endblock %}

docs/templates/enum.template.html

@@ -0,0 +1 @@
+{% extends 'class.template.html' -%}

docs/templates/example-region.template.html

@@ -0,0 +1,7 @@
+<div class="code-example">
+{% marked %}
+```
+{$ doc.contents $}
+```
+{% endmarked %}
+</div>

docs/templates/function.template.html

@@ -0,0 +1,31 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Export</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    <pre class="prettyprint no-bg">
+      <code>
+        export {$ doc.name $}{$ params.paramList(doc.parameters) | indent(8, true) | trim $}{$ params.returnType(doc.returnType) $}
+      </code>
+    </pre>
+    {%- if not doc.notYetDocumented %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/interface.template.html

@@ -0,0 +1,72 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Interface Overview</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <code class="no-bg api-doc-code openParens">interface {$ doc.name $} {</code>
+
+    {% if doc.members.length %}
+    <div layout="column">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent">
+          <a class="code-anchor" href="#{$ member.name $}-anchor">
+            <code class="code-background api-doc-code">{$ member.name | indent(6, false) | trim $}</code>
+            <code class="api-doc-code">{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+          </a>
+        </pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+    <p class="selector endParens">
+      <code class="api-doc-code no-bg">}</code>
+    </p>
+
+{% block additional %}
+{% endblock %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Interface Description</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if doc.description.length > 2 %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+  </div>
+{% if doc.members.length %}
+<div layout="row" layout-xs="column" class="instance-members" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Interface Details</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {% for member in doc.members %}{% if not member.internal %}
+    <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code class="api-doc-code">
+        {$ member.name $}{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+      </code>
+    </pre>
+    {%- if not member.notYetDocumented %}{$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}{% endif -%}
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  </div>
+  {% endif %}{% endfor %}
+</div>
+{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} },
+  defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/json-doc.template.json

@@ -0,0 +1 @@
+{$ doc.data | json $}

docs/templates/layout/_deprecated-notes.html

@@ -0,0 +1,11 @@
+{% if doc.showDeprecatedNotes %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Deprecation Notes</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {%- if doc.deprecated %}{$ doc.deprecated | marked $}
+    {% else %}<em>Not yet documented</em>{% endif %}
+  </div>
+</div>
+{% endif %}

docs/templates/layout/_how-to-use.html

@@ -0,0 +1,10 @@
+{%- if doc.howToUse %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">How to use</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {$ doc.howToUse | marked $}
+  </div>
+</div>
+{% endif %}

docs/templates/layout/_ng-module.html

@@ -0,0 +1,8 @@
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">NgModule</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {$ doc.ngModule $}
+  </div>
+</div>

docs/templates/layout/_security-notes.html

@@ -0,0 +1,10 @@
+{% if doc.showSecurityNotes and doc.security %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Security Risk</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {$ doc.security | marked $}
+  </div>
+</div>
+{% endif %}

docs/templates/layout/_what-it-does.html

@@ -0,0 +1,10 @@
+{%- if doc.whatItDoes %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">What it does</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {$ doc.whatItDoes | marked $}
+  </div>
+</div>
+{% endif %}

docs/templates/layout/base.template.html

@@ -0,0 +1 @@
+{% block body %}{% endblock %}

docs/templates/let.template.html

@@ -0,0 +1 @@
+{% extends 'var.template.html' -%}

docs/templates/lib/githubLinks.html

@@ -0,0 +1,7 @@
+{% macro githubHref(doc, versionInfo) -%}
+https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.projectRelativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}
+{%- endmacro %}
+
+{% macro githubViewLink(doc, versionInfo) -%}
+  <a href="{$ githubHref(doc, versionInfo) $}">{$ doc.fileInfo.projectRelativePath $}</a>
+{%- endmacro %}

docs/templates/lib/paramList.html

@@ -0,0 +1,12 @@
+{% macro paramList(params) -%}
+  {%- if params -%}
+    ({%- for param in params -%}
+      {$ param | escape $}{% if not loop.last %}, {% endif %}
+    {%- endfor %})
+  {%- endif %}
+{%- endmacro -%}
+
+
+{% macro returnType(returnType) -%}
+  {%- if returnType %} : {$ returnType | escape $}{% endif -%}
+{%- endmacro -%}

docs/templates/module.template.html

@@ -0,0 +1,14 @@
+{% import "lib/githubLinks.html" as github -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body -%}
+<p class="location-badge">defined in {$ github.githubViewLink(doc, versionInfo) $}</p>
+<ul>
+  {% for page in doc.childPages -%}
+  <li>
+    <!-- TODO: convert to hovercard -->
+    <a href="{$ relativePath(doc.moduleFolder, page.exportDoc.path) $}">{$ page.title $}</a>
+  </li>
+  {% endfor %}
+</ul>
+{% endblock %}

docs/templates/overview-dump.template.html

@@ -0,0 +1,74 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <style>
+    body {
+      max-width: 1000px;
+    }
+    h2 {
+      margin-top: 20px;
+      margin-bottom: 0;
+      border-bottom: solid 1px black;
+    }
+    h3 {
+      margin-top: 10px;
+      margin-bottom: 0;
+      padding-left: 20px;
+    }
+    h4 {
+      padding-left: 30px;
+      margin: 0;
+    }
+    .not-documented::after {
+      content: "(not documented)";
+      font-size: small;
+      font-style: italic;
+      color: red;
+    }
+    a {
+      color: black;
+      text-decoration: none;
+    }
+  </style>
+</head>
+<body>
+
+
+<h1>Module Overview</h1>
+
+{% for module in doc.modules %}
+
+<h2>
+  <code>{$ module.id $}{%- if module.public %} (public){% endif %}</code>
+</h2>
+
+  {% for export in module.exports %}
+  <h3 {% if export.notYetDocumented %}class="not-documented"{% endif %}>
+    <a href="{$ github.githubHref(export, versionInfo) $}">
+    <code>{$ export.docType $} {$ export.name $}</code>
+    </a>
+  </h3>
+      {%- if export.constructorDoc %}
+      <h4  {% if export.constructorDoc.notYetDocumented %}class="not-documented"{% endif %}>
+        <a href="{$ github.githubHref(export.constructorDoc, versionInfo) $}">
+        <code>{$ export.constructorDoc.name $}{$ params.paramList(export.constructorDoc.params) $}</code>
+        </a>
+      </h4>
+    {% endif -%}
+    {%- for member in export.members %}
+      <h4 {% if member.notYetDocumented %}class="not-documented"{% endif %}>
+        <a href="{$ github.githubHref(member, versionInfo) $}">
+        <code>{$ member.name $}{$ params.paramList(member.params) $}</code>
+        </a>
+      </h4>
+    {% endfor %}
+
+  {% endfor %}
+
+{% endfor %}
+
+</body>
+</html>

docs/templates/pipe.template.html

@@ -0,0 +1,30 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+{% include "layout/_ng-module.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Description</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if doc.description.length > 2 %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+  </div>
+</div>
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/type-alias.template.html

@@ -0,0 +1 @@
+{% extends 'interface.template.html' %}

docs/templates/var.template.html

@@ -0,0 +1,33 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' %}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Variable Export<h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    <pre class="prettyprint no-bg">
+      <code>
+        export {$ doc.name $}
+      </code>
+    </pre>
+    {%- if not doc.notYetDocumented %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+  </div>
+</div>
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}