docs(cheatsheet): update to new syntax

See https://github.com/angular/angular.io/pull/459

Closes #5733

modules/angular2/docs/cheatsheet/bootstrapping.md

@@ -2,8 +2,11 @@
 Bootstrapping
 @cheatsheetIndex 0
 @description
-`import {bootstrap} from 'angular2/angular2';`
+{@target js ts}`import {bootstrap} from 'angular2/angular2';`{@endtarget}
+{@target dart}`import 'package:angular2/bootstrap.dart';`{@endtarget}
 
 @cheatsheetItem
-`bootstrap​(MyAppComponent, [MyService, provide(...)]);`
+syntax:
+`bootstrap​(MyAppComponent, [MyService, provide(...)]);`|`provide`
+description:
 Bootstraps an application with MyAppComponent as the root component and configures the DI providers.

modules/angular2/docs/cheatsheet/built-in-directives.md

@@ -5,21 +5,29 @@ Built-in directives
 `import {NgIf, ...} from 'angular2/angular2';`
 
 @cheatsheetItem
+syntax:
 `<section *ng-if="showSection">`|`*ng-if`
+description:
 Removes or recreates a portion of the DOM tree based on the showSection expression.
 
 @cheatsheetItem
+syntax:
 `<li *ng-for="#item of list">`|`*ng-for`
+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 [ng-switch]="conditionExpression">
   <template [ng-switch-when]="case1Exp">...</template>
   <template ng-switch-when="case2LiteralString">...</template>
   <template ng-switch-default>...</template>
 </div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`
+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 [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]`
+description:
 Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.

modules/angular2/docs/cheatsheet/class-decorators.md

@@ -5,17 +5,23 @@ Class decorators
 `import {Directive, ...} from 'angular2/angular2';`
 
 @cheatsheetItem
+syntax:
 `@Component({...})
 class MyComponent() {}`|`@Component({...})`
+description:
 Declares that a class is a component and provides metadata about the component.
 
 @cheatsheetItem
+syntax:
 `@Pipe({...})
 class MyPipe() {}`|`@Pipe({...})`
+description:
 Declares that a class is a pipe and provides metadata about the pipe.
 
 @cheatsheetItem
+syntax:
 `@Injectable()
 class MyService() {}`|`@Injectable()`
+description:
 Declares that a class has dependencies that should be injected into the constructor when the dependency
 injector is creating an instance of this class.

modules/angular2/docs/cheatsheet/component-configuration.md

@@ -6,27 +6,37 @@ Component configuration
 so the `@Directive` configuration applies to components as well
 
 @cheatsheetItem
+syntax:
 `viewProviders: [MyService, provide(...)]`|`viewProviders:`
+description:
 Array of dependency injection providers scoped to this component's view.
 
 
 @cheatsheetItem
+syntax:
 `template: 'Hello {{name}}'
 templateUrl: 'my-component.html'`|`template:`|`templateUrl:`
+description:
 Inline template / 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 / external stylesheet urls for styling component’s view.
 
 
 @cheatsheetItem
+syntax:
 `directives: [MyDirective, MyComponent]`|`directives:`
+description:
 List of directives used in the the component’s template.
 
 
 @cheatsheetItem
+syntax:
 `pipes: [MyPipe, OtherPipe]`|`pipes:`
+description:
 List of pipes used in the component's template.

modules/angular2/docs/cheatsheet/dependency-injection.md

@@ -5,16 +5,22 @@ Dependency injection configuration
 `import {provide} from 'angular2/angular2';`
 
 @cheatsheetItem
-`provide(MyService, {useClass: MyMockService})``provide`|`useClass`
+syntax:
+`provide(MyService, {useClass: MyMockService})`|`provide`|`useClass`
+description:
 Sets or overrides the provider for MyService to the MyMockService class.
 
 
 @cheatsheetItem
-`provide(MyService, {useFactory: myFactory})``provide`|`useFactory`
+syntax:
+`provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory`
+description:
 Sets or overrides the provider for MyService to the myFactory factory function.
 
 
 @cheatsheetItem
-`provide(MyValue, {useValue: 41})``provide`|`useValue`
+syntax:
+`provide(MyValue, {useValue: 41})`|`provide`|`useValue`
+description:
 Sets or overrides the provider for MyValue to the value 41.
 

modules/angular2/docs/cheatsheet/directive-and-component-decorators.md

@@ -5,42 +5,58 @@ Class field decorators for directives and components
 `import {Input, ...} from 'angular2/angular2';`
 
 @cheatsheetItem
+syntax:
 `@Input() myProperty;`|`@Input()`
+description:
 Declares an input property that we can update via property binding, e.g.
 `<my-cmp [my-property]="someExpression">`
 
 
 @cheatsheetItem
+syntax:
 `@Output() myEvent = new EventEmitter();`|`@Output()`
+description:
 Declares an output property that fires events to which we can subscribe with an event binding, e.g. `<my-cmp (my-event)="doSomething()">`
 
 
 @cheatsheetItem
+syntax:
 `@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`
+description:
 Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid)
 
 
 
 @cheatsheetItem
+syntax:
 `@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
+description:
 Subscribes to a host element event (e.g. click) with a directive/component method (e.g., onClick), optionally passing an argument ($event)
 
 
 @cheatsheetItem
+syntax:
 `@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
+description:
 Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
 
 
 @cheatsheetItem
+syntax:
 `@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
+description:
 Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
 
 
 @cheatsheetItem
+syntax:
 `@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
+description:
 Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
 
 
 @cheatsheetItem
+syntax:
 `@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
+description:
 Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.

modules/angular2/docs/cheatsheet/directive-configuration.md

@@ -5,12 +5,16 @@ Directive configuration
 `@Directive({ property1: value1, ... }) )`
 
 @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:
 `providers: [MyService, provide(...)]`|`providers:`
+description:
 Array of dependency injection providers for this directive and its children.

modules/angular2/docs/cheatsheet/forms.md

@@ -5,5 +5,7 @@ Forms
 `import {FORM_DIRECTIVES} from 'angular2/angular2';`
 
 @cheatsheetItem
+syntax:
 `<input [(ng-model)]="userName">`|`[(ng-model)]`
+description:
 Provides two-way data-binding, parsing and validation for form controls.

modules/angular2/docs/cheatsheet/lifecycle hooks.md

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

modules/angular2/docs/cheatsheet/routing.md

@@ -6,50 +6,68 @@ Routing and navigation
 
 
 @cheatsheetItem
+syntax:
 `@RouteConfig([
   { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
   { path: '/staticPath', component: ..., as: ...},
   { path: '/*wildCardParam', component: ..., as: ...}
 ])
 class MyComponent() {}`|`@RouteConfig`
+description:
 Configures routes for the decorated component. Supports static, parameterized and wildcard routes.
 
 
 @cheatsheetItem
+syntax:
 `<router-outlet></router-outlet>`|`router-outlet`
+description:
 Marks the location to load the component of the active route.
 
 
 @cheatsheetItem
+syntax:
 `<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`
+description:
 Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.
 
 
 @cheatsheetItem
+syntax:
 `@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`
+description:
 A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.
 
 
 @cheatsheetItem
+syntax:
 `routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
+description:
 After navigating to a component, the router calls component's routerOnActivate method (if defined).
 
 
 @cheatsheetItem
+syntax:
 `routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
+description:
 The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.
 
 
 @cheatsheetItem
+syntax:
 `routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
+description:
 The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
 
 
 @cheatsheetItem
+syntax:
 `routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
+description:
 The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.
 
 
 @cheatsheetItem
+syntax:
 `routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
+description:
 Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.

modules/angular2/docs/cheatsheet/template-syntax.md

@@ -4,53 +4,77 @@ Template syntax
 @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, e.g. "Hello Seabiscuit". Equivalent to:
 `<div [title]="'Hello' + ponyName">`
 
 @cheatsheetItem
+syntax:
 `<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
+description:
 Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
 
 @cheatsheetItem
+syntax:
 `<my-cmp [(title)]="name">`|`[(title)]`
+description:
 Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="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 *my-unless="myExpression">...</p>`|`*my-unless`
+description:
 The `*` symbol means that the current element will be turned into an embedded template. Equivalent to:
 `<template [myless]="myExpression"><p>...</p></template>`
 
 @cheatsheetItem
+syntax:
 `<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>`|`{{cardNumber | myCreditCardNumberFormatter}}`
+description:
 Transforms the current value of expression `cardNumber` via the pipe called `creditCardNumberFormatter`.
 
 @cheatsheetItem
+syntax:
 `<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
+description:
 The Elvis operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.