@angular/core 2.0.0-rc.1 → 2.0.0-rc.2

package/esm/src/metadata/lifecycle_hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifecycle_hooks.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/lifecycle_hooks.ts"],"names":[],"mappings":"AAMA,WAAY,cASX;AATD,WAAY,cAAc;IACxB,uDAAM,CAAA;IACN,6DAAS,CAAA;IACT,yDAAO,CAAA;IACP,6DAAS,CAAA;IACT,2EAAgB,CAAA;IAChB,iFAAmB,CAAA;IACnB,qEAAa,CAAA;IACb,2EAAgB,CAAA;AAClB,CAAC,EATW,cAAc,KAAd,cAAc,QASzB;AAED;;GAEG;AACH,OAAO,IAAI,sBAAsB,GAAG;IAClC,cAAc,CAAC,MAAM;IACrB,cAAc,CAAC,SAAS;IACxB,cAAc,CAAC,OAAO;IACtB,cAAc,CAAC,SAAS;IACxB,cAAc,CAAC,gBAAgB;IAC/B,cAAc,CAAC,mBAAmB;IAClC,cAAc,CAAC,aAAa;IAC5B,cAAc,CAAC,gBAAgB;CAChC,CAAC","sourcesContent":["interface DecoratorInvocation {\n    type: Function;\n    args?: any[];\n  }\n  import {SimpleChange} from '../change_detection/change_detection_util';\n\nexport enum LifecycleHooks {\n  OnInit,\n  OnDestroy,\n  DoCheck,\n  OnChanges,\n  AfterContentInit,\n  AfterContentChecked,\n  AfterViewInit,\n  AfterViewChecked\n}\n\n/**\n * @internal\n */\nexport var LIFECYCLE_HOOKS_VALUES = [\n  LifecycleHooks.OnInit,\n  LifecycleHooks.OnDestroy,\n  LifecycleHooks.DoCheck,\n  LifecycleHooks.OnChanges,\n  LifecycleHooks.AfterContentInit,\n  LifecycleHooks.AfterContentChecked,\n  LifecycleHooks.AfterViewInit,\n  LifecycleHooks.AfterViewChecked\n];\n\n/**\n * Lifecycle hooks are guaranteed to be called in the following order:\n * - `OnChanges` (if any bindings have changed),\n * - `OnInit` (after the first check only),\n * - `DoCheck`,\n * - `AfterContentInit`,\n * - `AfterContentChecked`,\n * - `AfterViewInit`,\n * - `AfterViewChecked`,\n * - `OnDestroy` (at the very end before destruction)\n */\n\n/**\n * Implement this interface to get notified when any data-bound property of your directive changes.\n *\n * `ngOnChanges` is called right after the data-bound properties have been checked and before view\n * and content children are checked if at least one of them has changed.\n *\n * The `changes` parameter contains an entry for each of the changed data-bound property. The key is\n * the property name and the value is an instance of {@link SimpleChange}.\n *\n * ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):\n *\n * ```typescript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>myProp = {{myProp}}</p>`\n * })\n * class MyComponent implements OnChanges {\n *   @Input() myProp: any;\n *\n *   ngOnChanges(changes: {[propName: string]: SimpleChange}) {\n *     console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"value = value + 1\">Change MyComponent</button>\n *     <my-cmp [my-prop]=\"value\"></my-cmp>`,\n *   directives: [MyComponent]\n * })\n * export class App {\n *   value = 0;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n */\nexport interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange}); }\n\n/**\n * Implement this interface to execute custom initialization logic after your directive's\n * data-bound properties have been initialized.\n *\n * `ngOnInit` is called right after the directive's data-bound properties have been checked for the\n * first time, and before any of its children have been checked. It is invoked only once when the\n * directive is instantiated.\n *\n * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))\n *\n * ```typescript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>my-component</p>`\n * })\n * class MyComponent implements OnInit, OnDestroy {\n *   ngOnInit() {\n *     console.log('ngOnInit');\n *   }\n *\n *   ngOnDestroy() {\n *     console.log('ngOnDestroy');\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"hasChild = !hasChild\">\n *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent\n *     </button>\n *     <my-cmp *ngIf=\"hasChild\"></my-cmp>`,\n *   directives: [MyComponent, NgIf]\n * })\n * export class App {\n *   hasChild = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n *  ```\n */\nexport interface OnInit { ngOnInit(); }\n\n/**\n * Implement this interface to override the default change detection algorithm for your directive.\n *\n * `ngDoCheck` gets called to check the changes in the directives instead of the default algorithm.\n *\n * The default change detection algorithm looks for differences by comparing bound-property values\n * by reference across change detection runs. When `DoCheck` is implemented, the default algorithm\n * is disabled and `ngDoCheck` is responsible for checking for changes.\n *\n * Implementing this interface allows improving performance by using insights about the component,\n * its implementation and data types of its properties.\n *\n * Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.\n * `ngOnChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes\n * have to be handled from within the `ngDoCheck` callback.\n *\n * Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.\n *\n * ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))\n *\n * In the following example `ngDoCheck` uses an {@link IterableDiffers} to detect the updates to the\n * array `list`:\n *\n * ```typescript\n * @Component({\n *   selector: 'custom-check',\n *   template: `\n *     <p>Changes:</p>\n *     <ul>\n *       <li *ngFor=\"let line of logs\">{{line}}</li>\n *     </ul>`,\n *   directives: [NgFor]\n * })\n * class CustomCheckComponent implements DoCheck {\n *   @Input() list: any[];\n *   differ: any;\n *   logs = [];\n *\n *   constructor(differs: IterableDiffers) {\n *     this.differ = differs.find([]).create(null);\n *   }\n *\n *   ngDoCheck() {\n *     var changes = this.differ.diff(this.list);\n *\n *     if (changes) {\n *       changes.forEachAddedItem(r => this.logs.push('added ' + r.item));\n *       changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))\n *     }\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"list.push(list.length)\">Push</button>\n *     <button (click)=\"list.pop()\">Pop</button>\n *     <custom-check [list]=\"list\"></custom-check>`,\n *   directives: [CustomCheckComponent]\n * })\n * export class App {\n *   list = [];\n * }\n * ```\n */\nexport interface DoCheck { ngDoCheck(); }\n\n/**\n * Implement this interface to get notified when your directive is destroyed.\n *\n * `ngOnDestroy` callback is typically used for any custom cleanup that needs to occur when the\n * instance is destroyed\n *\n * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))\n *\n * ```typesript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>my-component</p>`\n * })\n * class MyComponent implements OnInit, OnDestroy {\n *   ngOnInit() {\n *     console.log('ngOnInit');\n *   }\n *\n *   ngOnDestroy() {\n *     console.log('ngOnDestroy');\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"hasChild = !hasChild\">\n *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent\n *     </button>\n *     <my-cmp *ngIf=\"hasChild\"></my-cmp>`,\n *   directives: [MyComponent, NgIf]\n * })\n * export class App {\n *   hasChild = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n *\n *\n * To create a stateful Pipe, you should implement this interface and set the `pure`\n * parameter to `false` in the {@link PipeMetadata}.\n *\n * A stateful pipe may produce different output, given the same input. It is\n * likely that a stateful pipe may contain state that should be cleaned up when\n * a binding is destroyed. For example, a subscription to a stream of data may need to\n * be disposed, or an interval may need to be cleared.\n *\n * ### Example ([live demo](http://plnkr.co/edit/i8pm5brO4sPaLxBx56MR?p=preview))\n *\n * In this example, a pipe is created to countdown its input value, updating it every\n * 50ms. Because it maintains an internal interval, it automatically clears\n * the interval when the binding is destroyed or the countdown completes.\n *\n * ```\n * import {OnDestroy, Pipe, PipeTransform} from '@angular/core'\n * @Pipe({name: 'countdown', pure: false})\n * class CountDown implements PipeTransform, OnDestroy {\n *   remainingTime:Number;\n *   interval:SetInterval;\n *   ngOnDestroy() {\n *     if (this.interval) {\n *       clearInterval(this.interval);\n *     }\n *   }\n *   transform(value: any, args: any[] = []) {\n *     if (!parseInt(value, 10)) return null;\n *     if (typeof this.remainingTime !== 'number') {\n *       this.remainingTime = parseInt(value, 10);\n *     }\n *     if (!this.interval) {\n *       this.interval = setInterval(() => {\n *         this.remainingTime-=50;\n *         if (this.remainingTime <= 0) {\n *           this.remainingTime = 0;\n *           clearInterval(this.interval);\n *           delete this.interval;\n *         }\n *       }, 50);\n *     }\n *     return this.remainingTime;\n *   }\n * }\n * ```\n *\n * Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,\n * every 50ms, until it reaches 0.\n *\n */\nexport interface OnDestroy { ngOnDestroy(); }\n\n/**\n * Implement this interface to get notified when your directive's content has been fully\n * initialized.\n *\n * ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))\n *\n * ```typescript\n * @Component({\n *   selector: 'child-cmp',\n *   template: `{{where}} child`\n * })\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `<ng-content></ng-content>`\n * })\n * class ParentComponent implements AfterContentInit {\n *   @ContentChild(ChildComponent) contentChild: ChildComponent;\n *\n *   constructor() {\n *     // contentChild is not initialized yet\n *     console.log(this.getMessage(this.contentChild));\n *   }\n *\n *   ngAfterContentInit() {\n *     // contentChild is updated after the content has been checked\n *     console.log('AfterContentInit: ' + this.getMessage(this.contentChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <parent-cmp>\n *       <child-cmp where=\"content\"></child-cmp>\n *     </parent-cmp>`,\n *   directives: [ParentComponent, ChildComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n */\nexport interface AfterContentInit { ngAfterContentInit(); }\n\n/**\n * Implement this interface to get notified after every check of your directive's content.\n *\n * ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({selector: 'parent-cmp', template: `<ng-content></ng-content>`})\n * class ParentComponent implements AfterContentChecked {\n *   @ContentChild(ChildComponent) contentChild: ChildComponent;\n *\n *   constructor() {\n *     // contentChild is not initialized yet\n *     console.log(this.getMessage(this.contentChild));\n *   }\n *\n *   ngAfterContentChecked() {\n *     // contentChild is updated after the content has been checked\n *     console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <parent-cmp>\n *       <button (click)=\"hasContent = !hasContent\">Toggle content child</button>\n *       <child-cmp *ngIf=\"hasContent\" where=\"content\"></child-cmp>\n *     </parent-cmp>`,\n *   directives: [NgIf, ParentComponent, ChildComponent]\n * })\n * export class App {\n *   hasContent = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n */\nexport interface AfterContentChecked { ngAfterContentChecked(); }\n\n/**\n * Implement this interface to get notified when your component's view has been fully initialized.\n *\n * ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `<child-cmp where=\"view\"></child-cmp>`,\n *   directives: [ChildComponent]\n * })\n * class ParentComponent implements AfterViewInit {\n *   @ViewChild(ChildComponent) viewChild: ChildComponent;\n *\n *   constructor() {\n *     // viewChild is not initialized yet\n *     console.log(this.getMessage(this.viewChild));\n *   }\n *\n *   ngAfterViewInit() {\n *     // viewChild is updated after the view has been initialized\n *     console.log('ngAfterViewInit: ' + this.getMessage(this.viewChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<parent-cmp></parent-cmp>`,\n *   directives: [ParentComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n */\nexport interface AfterViewInit { ngAfterViewInit(); }\n\n/**\n * Implement this interface to get notified after every check of your component's view.\n *\n * ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `\n *     <button (click)=\"showView = !showView\">Toggle view child</button>\n *     <child-cmp *ngIf=\"showView\" where=\"view\"></child-cmp>`,\n *   directives: [NgIf, ChildComponent]\n * })\n * class ParentComponent implements AfterViewChecked {\n *   @ViewChild(ChildComponent) viewChild: ChildComponent;\n *   showView = true;\n *\n *   constructor() {\n *     // viewChild is not initialized yet\n *     console.log(this.getMessage(this.viewChild));\n *   }\n *\n *   ngAfterViewChecked() {\n *     // viewChild is updated after the view has been checked\n *     console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<parent-cmp></parent-cmp>`,\n *   directives: [ParentComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n */\nexport interface AfterViewChecked { ngAfterViewChecked(); }\n"]}
+{"version":3,"file":"lifecycle_hooks.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/lifecycle_hooks.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,WAAY,cASX;AATD,WAAY,cAAc;IACxB,uDAAM,CAAA;IACN,6DAAS,CAAA;IACT,yDAAO,CAAA;IACP,6DAAS,CAAA;IACT,2EAAgB,CAAA;IAChB,iFAAmB,CAAA;IACnB,qEAAa,CAAA;IACb,2EAAgB,CAAA;AAClB,CAAC,EATW,cAAc,KAAd,cAAc,QASzB;AASD,OAAO,IAAI,sBAAsB,GAAG;IAClC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS;IACjG,cAAc,CAAC,gBAAgB,EAAE,cAAc,CAAC,mBAAmB,EAAE,cAAc,CAAC,aAAa;IACjG,cAAc,CAAC,gBAAgB;CAChC,CAAC;AAEF;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;AAEA,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH;AAA2E,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH;AAA6E,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH;AAAiF,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH;AAA+F,CAAC;AAEhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH;AAEA,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH;AAAyF,CAAC;AAE1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH;AAA+F,CAAC;AAAA","sourcesContent":["import {SimpleChange} from '../change_detection/change_detection_util';\n\n/**\n * @stable\n */\nexport enum LifecycleHooks {\n  OnInit,\n  OnDestroy,\n  DoCheck,\n  OnChanges,\n  AfterContentInit,\n  AfterContentChecked,\n  AfterViewInit,\n  AfterViewChecked\n}\n\n/**\n * A `changes` object whose keys are property names and\n * values are instances of {@link SimpleChange}. See {@link OnChanges}\n * @stable\n */\nexport interface SimpleChanges { [propName: string]: SimpleChange; }\n\nexport var LIFECYCLE_HOOKS_VALUES = [\n  LifecycleHooks.OnInit, LifecycleHooks.OnDestroy, LifecycleHooks.DoCheck, LifecycleHooks.OnChanges,\n  LifecycleHooks.AfterContentInit, LifecycleHooks.AfterContentChecked, LifecycleHooks.AfterViewInit,\n  LifecycleHooks.AfterViewChecked\n];\n\n/**\n * Lifecycle hooks are guaranteed to be called in the following order:\n * - `OnChanges` (if any bindings have changed),\n * - `OnInit` (after the first check only),\n * - `DoCheck`,\n * - `AfterContentInit`,\n * - `AfterContentChecked`,\n * - `AfterViewInit`,\n * - `AfterViewChecked`,\n * - `OnDestroy` (at the very end before destruction)\n */\n\n/**\n * Implement this interface to get notified when any data-bound property of your directive changes.\n *\n * `ngOnChanges` is called right after the data-bound properties have been checked and before view\n * and content children are checked if at least one of them has changed.\n *\n * The `changes` parameter contains an entry for each of the changed data-bound property. The key is\n * the property name and the value is an instance of {@link SimpleChange}.\n *\n * ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):\n *\n * ```typescript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>myProp = {{myProp}}</p>`\n * })\n * class MyComponent implements OnChanges {\n *   @Input() myProp: any;\n *\n *   ngOnChanges(changes: SimpleChanges) {\n *     console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"value = value + 1\">Change MyComponent</button>\n *     <my-cmp [my-prop]=\"value\"></my-cmp>`,\n *   directives: [MyComponent]\n * })\n * export class App {\n *   value = 0;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n * @stable\n */\nexport abstract class OnChanges {\n  abstract ngOnChanges(changes: SimpleChanges): any /** TODO #9100 */;\n}\n\n/**\n * Implement this interface to execute custom initialization logic after your directive's\n * data-bound properties have been initialized.\n *\n * `ngOnInit` is called right after the directive's data-bound properties have been checked for the\n * first time, and before any of its children have been checked. It is invoked only once when the\n * directive is instantiated.\n *\n * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))\n *\n * ```typescript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>my-component</p>`\n * })\n * class MyComponent implements OnInit, OnDestroy {\n *   ngOnInit() {\n *     console.log('ngOnInit');\n *   }\n *\n *   ngOnDestroy() {\n *     console.log('ngOnDestroy');\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"hasChild = !hasChild\">\n *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent\n *     </button>\n *     <my-cmp *ngIf=\"hasChild\"></my-cmp>`,\n *   directives: [MyComponent, NgIf]\n * })\n * export class App {\n *   hasChild = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n *  ```\n * @stable\n */\nexport abstract class OnInit { abstract ngOnInit(): any /** TODO #9100 */; }\n\n/**\n * Implement this interface to supplement the default change detection algorithm in your directive.\n *\n * `ngDoCheck` gets called to check the changes in the directives in addition to the default\n * algorithm.\n *\n * The default change detection algorithm looks for differences by comparing bound-property values\n * by reference across change detection runs.\n *\n * Note that a directive typically should not use both `DoCheck` and {@link OnChanges} to respond to\n * changes on the same input. `ngOnChanges` will continue to be called when the default change\n * detector\n * detects changes, so it is usually unnecessary to respond to changes on the same input in both\n * hooks.\n * Reaction to the changes have to be handled from within the `ngDoCheck` callback.\n *\n * You can use {@link KeyValueDiffers} and {@link IterableDiffers} to help add your custom check\n * mechanisms.\n *\n * ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))\n *\n * In the following example `ngDoCheck` uses an {@link IterableDiffers} to detect the updates to the\n * array `list`:\n *\n * ```typescript\n * @Component({\n *   selector: 'custom-check',\n *   template: `\n *     <p>Changes:</p>\n *     <ul>\n *       <li *ngFor=\"let line of logs\">{{line}}</li>\n *     </ul>`,\n *   directives: [NgFor]\n * })\n * class CustomCheckComponent implements DoCheck {\n *   @Input() list: any[];\n *   differ: any;\n *   logs = [];\n *\n *   constructor(differs: IterableDiffers) {\n *     this.differ = differs.find([]).create(null);\n *   }\n *\n *   ngDoCheck() {\n *     var changes = this.differ.diff(this.list);\n *\n *     if (changes) {\n *       changes.forEachAddedItem(r => this.logs.push('added ' + r.item));\n *       changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))\n *     }\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"list.push(list.length)\">Push</button>\n *     <button (click)=\"list.pop()\">Pop</button>\n *     <custom-check [list]=\"list\"></custom-check>`,\n *   directives: [CustomCheckComponent]\n * })\n * export class App {\n *   list = [];\n * }\n * ```\n * @stable\n */\nexport abstract class DoCheck { abstract ngDoCheck(): any /** TODO #9100 */; }\n\n/**\n * Implement this interface to get notified when your directive is destroyed.\n *\n * `ngOnDestroy` callback is typically used for any custom cleanup that needs to occur when the\n * instance is destroyed\n *\n * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))\n *\n * ```typesript\n * @Component({\n *   selector: 'my-cmp',\n *   template: `<p>my-component</p>`\n * })\n * class MyComponent implements OnInit, OnDestroy {\n *   ngOnInit() {\n *     console.log('ngOnInit');\n *   }\n *\n *   ngOnDestroy() {\n *     console.log('ngOnDestroy');\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <button (click)=\"hasChild = !hasChild\">\n *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent\n *     </button>\n *     <my-cmp *ngIf=\"hasChild\"></my-cmp>`,\n *   directives: [MyComponent, NgIf]\n * })\n * export class App {\n *   hasChild = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n *\n *\n * To create a stateful Pipe, you should implement this interface and set the `pure`\n * parameter to `false` in the {@link PipeMetadata}.\n *\n * A stateful pipe may produce different output, given the same input. It is\n * likely that a stateful pipe may contain state that should be cleaned up when\n * a binding is destroyed. For example, a subscription to a stream of data may need to\n * be disposed, or an interval may need to be cleared.\n *\n * ### Example ([live demo](http://plnkr.co/edit/i8pm5brO4sPaLxBx56MR?p=preview))\n *\n * In this example, a pipe is created to countdown its input value, updating it every\n * 50ms. Because it maintains an internal interval, it automatically clears\n * the interval when the binding is destroyed or the countdown completes.\n *\n * ```\n * import {OnDestroy, Pipe, PipeTransform} from '@angular/core'\n * @Pipe({name: 'countdown', pure: false})\n * class CountDown implements PipeTransform, OnDestroy {\n *   remainingTime:Number;\n *   interval:SetInterval;\n *   ngOnDestroy() {\n *     if (this.interval) {\n *       clearInterval(this.interval);\n *     }\n *   }\n *   transform(value: any, args: any[] = []) {\n *     if (!parseInt(value, 10)) return null;\n *     if (typeof this.remainingTime !== 'number') {\n *       this.remainingTime = parseInt(value, 10);\n *     }\n *     if (!this.interval) {\n *       this.interval = setInterval(() => {\n *         this.remainingTime-=50;\n *         if (this.remainingTime <= 0) {\n *           this.remainingTime = 0;\n *           clearInterval(this.interval);\n *           delete this.interval;\n *         }\n *       }, 50);\n *     }\n *     return this.remainingTime;\n *   }\n * }\n * ```\n *\n * Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,\n * every 50ms, until it reaches 0.\n *\n * @stable\n */\nexport abstract class OnDestroy { abstract ngOnDestroy(): any /** TODO #9100 */; }\n\n/**\n * Implement this interface to get notified when your directive's content has been fully\n * initialized.\n *\n * ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))\n *\n * ```typescript\n * @Component({\n *   selector: 'child-cmp',\n *   template: `{{where}} child`\n * })\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `<ng-content></ng-content>`\n * })\n * class ParentComponent implements AfterContentInit {\n *   @ContentChild(ChildComponent) contentChild: ChildComponent;\n *\n *   constructor() {\n *     // contentChild is not initialized yet\n *     console.log(this.getMessage(this.contentChild));\n *   }\n *\n *   ngAfterContentInit() {\n *     // contentChild is updated after the content has been checked\n *     console.log('AfterContentInit: ' + this.getMessage(this.contentChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <parent-cmp>\n *       <child-cmp where=\"content\"></child-cmp>\n *     </parent-cmp>`,\n *   directives: [ParentComponent, ChildComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n * @stable\n */\nexport abstract class AfterContentInit { abstract ngAfterContentInit(): any /** TODO #9100 */; }\n\n/**\n * Implement this interface to get notified after every check of your directive's content.\n *\n * ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({selector: 'parent-cmp', template: `<ng-content></ng-content>`})\n * class ParentComponent implements AfterContentChecked {\n *   @ContentChild(ChildComponent) contentChild: ChildComponent;\n *\n *   constructor() {\n *     // contentChild is not initialized yet\n *     console.log(this.getMessage(this.contentChild));\n *   }\n *\n *   ngAfterContentChecked() {\n *     // contentChild is updated after the content has been checked\n *     console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <parent-cmp>\n *       <button (click)=\"hasContent = !hasContent\">Toggle content child</button>\n *       <child-cmp *ngIf=\"hasContent\" where=\"content\"></child-cmp>\n *     </parent-cmp>`,\n *   directives: [NgIf, ParentComponent, ChildComponent]\n * })\n * export class App {\n *   hasContent = true;\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n * @stable\n */\nexport abstract class AfterContentChecked {\n  abstract ngAfterContentChecked(): any /** TODO #9100 */;\n}\n\n/**\n * Implement this interface to get notified when your component's view has been fully initialized.\n *\n * ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `<child-cmp where=\"view\"></child-cmp>`,\n *   directives: [ChildComponent]\n * })\n * class ParentComponent implements AfterViewInit {\n *   @ViewChild(ChildComponent) viewChild: ChildComponent;\n *\n *   constructor() {\n *     // viewChild is not initialized yet\n *     console.log(this.getMessage(this.viewChild));\n *   }\n *\n *   ngAfterViewInit() {\n *     // viewChild is updated after the view has been initialized\n *     console.log('ngAfterViewInit: ' + this.getMessage(this.viewChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<parent-cmp></parent-cmp>`,\n *   directives: [ParentComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n * @stable\n */\nexport abstract class AfterViewInit { abstract ngAfterViewInit(): any /** TODO #9100 */; }\n\n/**\n * Implement this interface to get notified after every check of your component's view.\n *\n * ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))\n *\n * ```typescript\n * @Component({selector: 'child-cmp', template: `{{where}} child`})\n * class ChildComponent {\n *   @Input() where: string;\n * }\n *\n * @Component({\n *   selector: 'parent-cmp',\n *   template: `\n *     <button (click)=\"showView = !showView\">Toggle view child</button>\n *     <child-cmp *ngIf=\"showView\" where=\"view\"></child-cmp>`,\n *   directives: [NgIf, ChildComponent]\n * })\n * class ParentComponent implements AfterViewChecked {\n *   @ViewChild(ChildComponent) viewChild: ChildComponent;\n *   showView = true;\n *\n *   constructor() {\n *     // viewChild is not initialized yet\n *     console.log(this.getMessage(this.viewChild));\n *   }\n *\n *   ngAfterViewChecked() {\n *     // viewChild is updated after the view has been checked\n *     console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));\n *   }\n *\n *   private getMessage(cmp: ChildComponent): string {\n *     return cmp ? cmp.where + ' child' : 'no child';\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<parent-cmp></parent-cmp>`,\n *   directives: [ParentComponent]\n * })\n * export class App {\n * }\n *\n * bootstrap(App).catch(err => console.error(err));\n * ```\n * @stable\n */\nexport abstract class AfterViewChecked { abstract ngAfterViewChecked(): any /** TODO #9100 */; }\n\ninterface DecoratorInvocation {\n  type: Function;\n  args?: any[];\n}\n"]}

package/esm/src/metadata/lifecycle_hooks.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","metadata":{"LIFECYCLE_HOOKS_VALUES":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnDestroy"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"DoCheck"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnChanges"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterContentInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterContentChecked"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterViewInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterViewChecked"}]}}
+{"__symbolic":"module","version":1,"metadata":{"LIFECYCLE_HOOKS_VALUES":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnDestroy"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"DoCheck"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"OnChanges"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterContentInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterContentChecked"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterViewInit"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"LifecycleHooks"},"member":"AfterViewChecked"}]}}

package/esm/src/metadata/view.d.ts

@@ -1,8 +1,10 @@
-import { Type } from '../../src/facade/lang';
+import { AnimationEntryMetadata } from '../animation/metadata';
+import { Type } from '../facade/lang';
 /**
  * Defines template and style encapsulation options available for Component's {@link View}.
  *
  * See {@link ViewMetadata#encapsulation}.
+ * @stable
  */
 export declare enum ViewEncapsulation {
     /**
@@ -111,7 +113,8 @@ export declare class ViewMetadata {
      * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.
      */
     encapsulation: ViewEncapsulation;
-    constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}?: {
+    animations: AnimationEntryMetadata[];
+    constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls, animations}?: {
         templateUrl?: string;
         template?: string;
         directives?: Array<Type | any[]>;
@@ -119,5 +122,6 @@ export declare class ViewMetadata {
         encapsulation?: ViewEncapsulation;
         styles?: string[];
         styleUrls?: string[];
+        animations?: AnimationEntryMetadata[];
     });
 }

package/esm/src/metadata/view.js

@@ -2,6 +2,7 @@
  * Defines template and style encapsulation options available for Component's {@link View}.
  *
  * See {@link ViewMetadata#encapsulation}.
+ * @stable
  */
 export var ViewEncapsulation;
 (function (ViewEncapsulation) {
@@ -58,7 +59,7 @@ export var VIEW_ENCAPSULATION_VALUES = [ViewEncapsulation.Emulated, ViewEncapsul
  * @ts2dart_const
  */
 export class ViewMetadata {
-    constructor({ templateUrl, template, directives, pipes, encapsulation, styles, styleUrls } = {}) {
+    constructor({ templateUrl, template, directives, pipes, encapsulation, styles, styleUrls, animations } = {}) {
         this.templateUrl = templateUrl;
         this.template = template;
         this.styleUrls = styleUrls;
@@ -66,6 +67,7 @@ export class ViewMetadata {
         this.directives = directives;
         this.pipes = pipes;
         this.encapsulation = encapsulation;
+        this.animations = animations;
     }
 }
 //# sourceMappingURL=view.js.map

package/esm/src/metadata/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/view.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,WAAY,iBAqBX;AArBD,WAAY,iBAAiB;IAC3B;;;;;;;OAOG;IACH,iEAAQ,CAAA;IACR;;;;;OAKG;IACH,6DAAM,CAAA;IACN;;OAEG;IACH,yDAAI,CAAA;AACN,CAAC,EArBW,iBAAiB,KAAjB,iBAAiB,QAqB5B;AAED,OAAO,IAAI,yBAAyB,GAChC,CAAC,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAGnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH;IA6DE,YAAY,EAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAC,GAQpF,EAAE;QACJ,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;IACrC,CAAC;AACH,CAAC;AAAA","sourcesContent":["interface DecoratorInvocation {\n    type: Function;\n    args?: any[];\n  }\n  import {Type} from '../../src/facade/lang';\n\n/**\n * Defines template and style encapsulation options available for Component's {@link View}.\n *\n * See {@link ViewMetadata#encapsulation}.\n */\nexport enum ViewEncapsulation {\n  /**\n   * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host\n   * Element and pre-processing the style rules provided via\n   * {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element\n   * attribute to all selectors.\n   *\n   * This is the default option.\n   */\n  Emulated,\n  /**\n   * Use the native encapsulation mechanism of the renderer.\n   *\n   * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and\n   * creating a ShadowRoot for Component's Host Element.\n   */\n  Native,\n  /**\n   * Don't provide any template or style encapsulation.\n   */\n  None\n}\n\nexport var VIEW_ENCAPSULATION_VALUES =\n    [ViewEncapsulation.Emulated, ViewEncapsulation.Native, ViewEncapsulation.None];\n\n\n/**\n * Metadata properties available for configuring Views.\n *\n * Each Angular component requires a single `@Component` and at least one `@View` annotation. The\n * `@View` annotation specifies the HTML template to use, and lists the directives that are active\n * within the template.\n *\n * When a component is instantiated, the template is loaded into the component's shadow root, and\n * the expressions and statements in the template are evaluated against the component.\n *\n * For details on the `@Component` annotation, see {@link ComponentMetadata}.\n *\n * ### Example\n *\n * ```\n * @Component({\n *   selector: 'greet',\n *   template: 'Hello {{name}}!',\n *   directives: [GreetUser, Bold]\n * })\n * class Greet {\n *   name: string;\n *\n *   constructor() {\n *     this.name = 'World';\n *   }\n * }\n * ```\n * @ts2dart_const\n */\nexport class ViewMetadata {\n  /**\n   * Specifies a template URL for an Angular component.\n   *\n   * NOTE: Only one of `templateUrl` or `template` can be defined per View.\n   *\n   * <!-- TODO: what's the url relative to? -->\n   */\n  templateUrl: string;\n\n  /**\n   * Specifies an inline template for an Angular component.\n   *\n   * NOTE: Only one of `templateUrl` or `template` can be defined per View.\n   */\n  template: string;\n\n  /**\n   * Specifies stylesheet URLs for an Angular component.\n   *\n   * <!-- TODO: what's the url relative to? -->\n   */\n  styleUrls: string[];\n\n  /**\n   * Specifies an inline stylesheet for an Angular component.\n   */\n  styles: string[];\n\n  /**\n   * Specifies a list of directives that can be used within a template.\n   *\n   * Directives must be listed explicitly to provide proper component encapsulation.\n   *\n   * ### Example\n   *\n   * ```javascript\n   * @Component({\n   *   selector: 'my-component',\n   *   directives: [NgFor]\n   *   template: '\n   *   <ul>\n   *     <li *ngFor=\"let item of items\">{{item}}</li>\n   *   </ul>'\n   * })\n   * class MyComponent {\n   * }\n   * ```\n   */\n  directives: Array<Type | any[]>;\n\n  pipes: Array<Type | any[]>;\n\n  /**\n   * Specify how the template and the styles should be encapsulated.\n   * The default is {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} if the view\n   * has styles,\n   * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.\n   */\n  encapsulation: ViewEncapsulation;\n\n  constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}: {\n    templateUrl?: string,\n    template?: string,\n    directives?: Array<Type | any[]>,\n    pipes?: Array<Type | any[]>,\n    encapsulation?: ViewEncapsulation,\n    styles?: string[],\n    styleUrls?: string[],\n  } = {}) {\n    this.templateUrl = templateUrl;\n    this.template = template;\n    this.styleUrls = styleUrls;\n    this.styles = styles;\n    this.directives = directives;\n    this.pipes = pipes;\n    this.encapsulation = encapsulation;\n  }\n}\n"]}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/view.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,WAAY,iBAqBX;AArBD,WAAY,iBAAiB;IAC3B;;;;;;;OAOG;IACH,iEAAQ,CAAA;IACR;;;;;OAKG;IACH,6DAAM,CAAA;IACN;;OAEG;IACH,yDAAI,CAAA;AACN,CAAC,EArBW,iBAAiB,KAAjB,iBAAiB,QAqB5B;AAED,OAAO,IAAI,yBAAyB,GAChC,CAAC,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAGnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH;IA+DE,YACI,EAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAC,GASpF,EAAE;QACR,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;AACH,CAAC;AAAA","sourcesContent":["import {AnimationEntryMetadata} from '../animation/metadata';\nimport {Type} from '../facade/lang';\n\n\n/**\n * Defines template and style encapsulation options available for Component's {@link View}.\n *\n * See {@link ViewMetadata#encapsulation}.\n * @stable\n */\nexport enum ViewEncapsulation {\n  /**\n   * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host\n   * Element and pre-processing the style rules provided via\n   * {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element\n   * attribute to all selectors.\n   *\n   * This is the default option.\n   */\n  Emulated,\n  /**\n   * Use the native encapsulation mechanism of the renderer.\n   *\n   * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and\n   * creating a ShadowRoot for Component's Host Element.\n   */\n  Native,\n  /**\n   * Don't provide any template or style encapsulation.\n   */\n  None\n}\n\nexport var VIEW_ENCAPSULATION_VALUES =\n    [ViewEncapsulation.Emulated, ViewEncapsulation.Native, ViewEncapsulation.None];\n\n\n/**\n * Metadata properties available for configuring Views.\n *\n * Each Angular component requires a single `@Component` and at least one `@View` annotation. The\n * `@View` annotation specifies the HTML template to use, and lists the directives that are active\n * within the template.\n *\n * When a component is instantiated, the template is loaded into the component's shadow root, and\n * the expressions and statements in the template are evaluated against the component.\n *\n * For details on the `@Component` annotation, see {@link ComponentMetadata}.\n *\n * ### Example\n *\n * ```\n * @Component({\n *   selector: 'greet',\n *   template: 'Hello {{name}}!',\n *   directives: [GreetUser, Bold]\n * })\n * class Greet {\n *   name: string;\n *\n *   constructor() {\n *     this.name = 'World';\n *   }\n * }\n * ```\n * @ts2dart_const\n */\nexport class ViewMetadata {\n  /**\n   * Specifies a template URL for an Angular component.\n   *\n   * NOTE: Only one of `templateUrl` or `template` can be defined per View.\n   *\n   * <!-- TODO: what's the url relative to? -->\n   */\n  templateUrl: string;\n\n  /**\n   * Specifies an inline template for an Angular component.\n   *\n   * NOTE: Only one of `templateUrl` or `template` can be defined per View.\n   */\n  template: string;\n\n  /**\n   * Specifies stylesheet URLs for an Angular component.\n   *\n   * <!-- TODO: what's the url relative to? -->\n   */\n  styleUrls: string[];\n\n  /**\n   * Specifies an inline stylesheet for an Angular component.\n   */\n  styles: string[];\n\n  /**\n   * Specifies a list of directives that can be used within a template.\n   *\n   * Directives must be listed explicitly to provide proper component encapsulation.\n   *\n   * ### Example\n   *\n   * ```javascript\n   * @Component({\n   *   selector: 'my-component',\n   *   directives: [NgFor]\n   *   template: '\n   *   <ul>\n   *     <li *ngFor=\"let item of items\">{{item}}</li>\n   *   </ul>'\n   * })\n   * class MyComponent {\n   * }\n   * ```\n   */\n  directives: Array<Type|any[]>;\n\n  pipes: Array<Type|any[]>;\n\n  /**\n   * Specify how the template and the styles should be encapsulated.\n   * The default is {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} if the view\n   * has styles,\n   * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.\n   */\n  encapsulation: ViewEncapsulation;\n\n  animations: AnimationEntryMetadata[];\n\n  constructor(\n      {templateUrl, template, directives, pipes, encapsulation, styles, styleUrls, animations}: {\n        templateUrl?: string,\n        template?: string,\n        directives?: Array<Type|any[]>,\n        pipes?: Array<Type|any[]>,\n        encapsulation?: ViewEncapsulation,\n        styles?: string[],\n        styleUrls?: string[],\n        animations?: AnimationEntryMetadata[]\n      } = {}) {\n    this.templateUrl = templateUrl;\n    this.template = template;\n    this.styleUrls = styleUrls;\n    this.styles = styles;\n    this.directives = directives;\n    this.pipes = pipes;\n    this.encapsulation = encapsulation;\n    this.animations = animations;\n  }\n}\n\ninterface DecoratorInvocation {\n  type: Function;\n  args?: any[];\n}\n"]}

package/esm/src/metadata/view.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","metadata":{"VIEW_ENCAPSULATION_VALUES":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"Emulated"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"Native"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"None"}]}}
+{"__symbolic":"module","version":1,"metadata":{"VIEW_ENCAPSULATION_VALUES":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"Emulated"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"Native"},{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ViewEncapsulation"},"member":"None"}]}}

package/esm/src/metadata.d.ts

@@ -2,14 +2,15 @@
  * This indirection is needed to free up Component, etc symbols in the public API
  * to be used by the decorator versions of these annotations.
  */
-export { QueryMetadata, ContentChildrenMetadata, ContentChildMetadata, ViewChildrenMetadata, ViewQueryMetadata, ViewChildMetadata, AttributeMetadata } from './metadata/di';
-export { ComponentMetadata, DirectiveMetadata, PipeMetadata, InputMetadata, OutputMetadata, HostBindingMetadata, HostListenerMetadata } from './metadata/directives';
-export { ViewMetadata, ViewEncapsulation } from './metadata/view';
-export { AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnChanges, OnDestroy, OnInit, DoCheck } from './metadata/lifecycle_hooks';
-import { QueryMetadata, ContentChildrenMetadata, ViewChildrenMetadata, AttributeMetadata } from './metadata/di';
+import { ChangeDetectionStrategy } from '../src/change_detection/change_detection';
+import { AnimationEntryMetadata } from './animation/metadata';
+import { AttributeMetadata, ContentChildrenMetadata, QueryMetadata, ViewChildrenMetadata } from './metadata/di';
 import { ComponentMetadata, DirectiveMetadata } from './metadata/directives';
-import { ViewMetadata, ViewEncapsulation } from './metadata/view';
-import { ChangeDetectionStrategy } from './change_detection/change_detection';
+import { ViewEncapsulation, ViewMetadata } from './metadata/view';
+export { AttributeMetadata, ContentChildMetadata, ContentChildrenMetadata, QueryMetadata, ViewChildMetadata, ViewChildrenMetadata, ViewQueryMetadata } from './metadata/di';
+export { ComponentMetadata, DirectiveMetadata, HostBindingMetadata, HostListenerMetadata, InputMetadata, OutputMetadata, PipeMetadata } from './metadata/directives';
+export { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit } from './metadata/lifecycle_hooks';
+export { ViewEncapsulation, ViewMetadata } from './metadata/view';
 import { TypeDecorator } from './util/decorators';
 import { Type } from '../src/facade/lang';
 /**
@@ -36,6 +37,7 @@ export interface ComponentDecorator extends TypeDecorator {
         renderer?: string;
         styles?: string[];
         styleUrls?: string[];
+        animations?: AnimationEntryMetadata[];
     }): ViewDecorator;
 }
 /**
@@ -55,6 +57,7 @@ export interface ViewDecorator extends TypeDecorator {
         renderer?: string;
         styles?: string[];
         styleUrls?: string[];
+        animations?: AnimationEntryMetadata[];
     }): ViewDecorator;
 }
 /**
@@ -98,7 +101,6 @@ export interface DirectiveMetadataFactory {
         host?: {
             [key: string]: string;
         };
-        bindings?: any[];
         providers?: any[];
         exportAs?: string;
         queries?: {
@@ -114,7 +116,6 @@ export interface DirectiveMetadataFactory {
         host?: {
             [key: string]: string;
         };
-        bindings?: any[];
         providers?: any[];
         exportAs?: string;
         queries?: {
@@ -163,20 +164,19 @@ export interface ComponentMetadataFactory {
         host?: {
             [key: string]: string;
         };
-        bindings?: any[];
         providers?: any[];
         exportAs?: string;
         moduleId?: string;
         queries?: {
             [key: string]: any;
         };
-        viewBindings?: any[];
         viewProviders?: any[];
         changeDetection?: ChangeDetectionStrategy;
         templateUrl?: string;
         template?: string;
         styleUrls?: string[];
         styles?: string[];
+        animations?: AnimationEntryMetadata[];
         directives?: Array<Type | any[]>;
         pipes?: Array<Type | any[]>;
         encapsulation?: ViewEncapsulation;
@@ -190,20 +190,19 @@ export interface ComponentMetadataFactory {
         host?: {
             [key: string]: string;
         };
-        bindings?: any[];
         providers?: any[];
         exportAs?: string;
         moduleId?: string;
         queries?: {
             [key: string]: any;
         };
-        viewBindings?: any[];
         viewProviders?: any[];
         changeDetection?: ChangeDetectionStrategy;
         templateUrl?: string;
         template?: string;
         styleUrls?: string[];
         styles?: string[];
+        animations?: AnimationEntryMetadata[];
         directives?: Array<Type | any[]>;
         pipes?: Array<Type | any[]>;
         encapsulation?: ViewEncapsulation;
@@ -260,6 +259,7 @@ export interface ViewMetadataFactory {
         encapsulation?: ViewEncapsulation;
         styles?: string[];
         styleUrls?: string[];
+        animations?: AnimationEntryMetadata[];
     }): ViewDecorator;
     new (obj: {
         templateUrl?: string;
@@ -269,6 +269,7 @@ export interface ViewMetadataFactory {
         encapsulation?: ViewEncapsulation;
         styles?: string[];
         styleUrls?: string[];
+        animations?: AnimationEntryMetadata[];
     }): ViewMetadata;
 }
 /**
@@ -351,6 +352,7 @@ export interface AttributeMetadataFactory {
  *   [new ng.Query(SomeType)]
  * ]
  * ```
+ * @deprecated
  */
 export interface QueryMetadataFactory {
     (selector: Type | string, {descendants, read}?: {
@@ -364,6 +366,7 @@ export interface QueryMetadataFactory {
 }
 /**
  * Factory for {@link ContentChildren}.
+ * @stable
  */
 export interface ContentChildrenMetadataFactory {
     (selector: Type | string, {descendants, read}?: {
@@ -377,6 +380,7 @@ export interface ContentChildrenMetadataFactory {
 }
 /**
  * Factory for {@link ContentChild}.
+ * @stable
  */
 export interface ContentChildMetadataFactory {
     (selector: Type | string, {read}?: {
@@ -388,6 +392,7 @@ export interface ContentChildMetadataFactory {
 }
 /**
  * Factory for {@link ViewChildren}.
+ * @stable
  */
 export interface ViewChildrenMetadataFactory {
     (selector: Type | string, {read}?: {
@@ -399,6 +404,7 @@ export interface ViewChildrenMetadataFactory {
 }
 /**
  * Factory for {@link ViewChild}.
+ * @stable
  */
 export interface ViewChildMetadataFactory {
     (selector: Type | string, {read}?: {
@@ -414,6 +420,7 @@ export interface ViewChildMetadataFactory {
  * ### Example
  *
  * {@example core/ts/metadata/metadata.ts region='pipe'}
+ * @stable
  */
 export interface PipeMetadataFactory {
     (obj: {
@@ -429,6 +436,7 @@ export interface PipeMetadataFactory {
  * {@link InputMetadata} factory for creating decorators.
  *
  * See {@link InputMetadata}.
+ * @stable
  */
 export interface InputMetadataFactory {
     (bindingPropertyName?: string): any;
@@ -438,6 +446,7 @@ export interface InputMetadataFactory {
  * {@link OutputMetadata} factory for creating decorators.
  *
  * See {@link OutputMetadata}.
+ * @stable
  */
 export interface OutputMetadataFactory {
     (bindingPropertyName?: string): any;
@@ -445,6 +454,7 @@ export interface OutputMetadataFactory {
 }
 /**
  * {@link HostBindingMetadata} factory function.
+ * @stable
  */
 export interface HostBindingMetadataFactory {
     (hostPropertyName?: string): any;
@@ -452,6 +462,7 @@ export interface HostBindingMetadataFactory {
 }
 /**
  * {@link HostListenerMetadata} factory function.
+ * @stable
  */
 export interface HostListenerMetadataFactory {
     (eventName: string, args?: string[]): any;
@@ -479,6 +490,7 @@ export interface HostListenerMetadataFactory {
  * ### Example
  *
  * {@example core/ts/metadata/metadata.ts region='component'}
+ * @stable
  */
 export declare var Component: ComponentMetadataFactory;
 /**
@@ -858,6 +870,7 @@ export declare var Component: ComponentMetadataFactory;
  * Note also that although the `<li></li>` template still exists inside the `<template></template>`,
  * the instantiated
  * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
+ * @stable
  */
 export declare var Directive: DirectiveMetadataFactory;
 /**
@@ -876,6 +889,7 @@ export declare var Directive: DirectiveMetadataFactory;
  * A decorator can inject string literal `text` like so:
  *
  * {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
+ * @stable
  */
 export declare var Attribute: AttributeMetadataFactory;
 /**
@@ -984,6 +998,7 @@ export declare var Attribute: AttributeMetadataFactory;
  *
  * The injected object is an unmodifiable live list.
  * See {@link QueryList} for more details.
+ * @deprecated
  */
 export declare var Query: QueryMetadataFactory;
 /**
@@ -1005,6 +1020,7 @@ export declare var Query: QueryMetadataFactory;
  *   }
  * }
  * ```
+ * @stable
  */
 export declare var ContentChildren: ContentChildrenMetadataFactory;
 /**
@@ -1020,12 +1036,22 @@ export declare var ContentChildren: ContentChildrenMetadataFactory;
  * })
  * class SomeDir {
  *   @ContentChild(ChildDirective) contentChild;
+ *   @ContentChild('container_ref') containerChild
  *
  *   ngAfterContentInit() {
  *     // contentChild is set
+ *     // containerChild is set
  *   }
  * }
  * ```
+ *
+ * ```html
+ * <container #container_ref>
+ *   <item>a</item>
+ *   <item>b</item>
+ * </container>
+ * ```
+ * @stable
  */
 export declare var ContentChild: ContentChildMetadataFactory;
 /**
@@ -1106,6 +1132,7 @@ export declare var ContentChild: ContentChildMetadataFactory;
  * ```
  *
  * See also: [ViewChildrenMetadata]
+ * @stable
  */
 export declare var ViewChildren: ViewChildrenMetadataFactory;
 /**
@@ -1177,6 +1204,7 @@ export declare var ViewChildren: ViewChildrenMetadataFactory;
  * }
  * ```
  * See also: [ViewChildMetadata]
+ * @stable
  */
 export declare var ViewChild: ViewChildMetadataFactory;
 /**
@@ -1213,6 +1241,7 @@ export declare var ViewChild: ViewChildMetadataFactory;
  *
  * The injected object is an iterable and observable live list.
  * See {@link QueryList} for more details.
+ * @deprecated
  */
 export declare var ViewQuery: QueryMetadataFactory;
 /**
@@ -1221,6 +1250,7 @@ export declare var ViewQuery: QueryMetadataFactory;
  * ### Example
  *
  * {@example core/ts/metadata/metadata.ts region='pipe'}
+ * @stable
  */
 export declare var Pipe: PipeMetadataFactory;
 /**
@@ -1263,6 +1293,7 @@ export declare var Pipe: PipeMetadataFactory;
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export declare var Input: InputMetadataFactory;
 /**
@@ -1305,6 +1336,7 @@ export declare var Input: InputMetadataFactory;
  * }
  * bootstrap(App);
  * ```
+ * @stable
  */
 export declare var Output: OutputMetadataFactory;
 /**
@@ -1326,8 +1358,8 @@ export declare var Output: OutputMetadataFactory;
  * @Directive({selector: '[ngModel]'})
  * class NgModelStatus {
  *   constructor(public control:NgModel) {}
- *   @HostBinding('[class.valid]') get valid { return this.control.valid; }
- *   @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
+ *   @HostBinding('class.valid') get valid() { return this.control.valid; }
+ *   @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
  * }
  *
  * @Component({
@@ -1341,6 +1373,7 @@ export declare var Output: OutputMetadataFactory;
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export declare var HostBinding: HostBindingMetadataFactory;
 /**
@@ -1376,5 +1409,6 @@ export declare var HostBinding: HostBindingMetadataFactory;
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export declare var HostListener: HostListenerMetadataFactory;

package/esm/src/metadata.js

@@ -1,13 +1,14 @@
 /**
-* This indirection is needed to free up Component, etc symbols in the public API
-* to be used by the decorator versions of these annotations.
-*/
-export { QueryMetadata, ContentChildrenMetadata, ContentChildMetadata, ViewChildrenMetadata, ViewQueryMetadata, ViewChildMetadata, AttributeMetadata } from './metadata/di';
-export { ComponentMetadata, DirectiveMetadata, PipeMetadata, InputMetadata, OutputMetadata, HostBindingMetadata, HostListenerMetadata } from './metadata/directives';
-export { ViewMetadata, ViewEncapsulation } from './metadata/view';
-import { QueryMetadata, ContentChildrenMetadata, ContentChildMetadata, ViewChildrenMetadata, ViewChildMetadata, ViewQueryMetadata, AttributeMetadata } from './metadata/di';
-import { ComponentMetadata, DirectiveMetadata, PipeMetadata, InputMetadata, OutputMetadata, HostBindingMetadata, HostListenerMetadata } from './metadata/directives';
+ * This indirection is needed to free up Component, etc symbols in the public API
+ * to be used by the decorator versions of these annotations.
+ */
+import { AttributeMetadata, ContentChildMetadata, ContentChildrenMetadata, QueryMetadata, ViewChildMetadata, ViewChildrenMetadata, ViewQueryMetadata } from './metadata/di';
+import { ComponentMetadata, DirectiveMetadata, HostBindingMetadata, HostListenerMetadata, InputMetadata, OutputMetadata, PipeMetadata } from './metadata/directives';
 import { ViewMetadata } from './metadata/view';
+export { AttributeMetadata, ContentChildMetadata, ContentChildrenMetadata, QueryMetadata, ViewChildMetadata, ViewChildrenMetadata, ViewQueryMetadata } from './metadata/di';
+export { ComponentMetadata, DirectiveMetadata, HostBindingMetadata, HostListenerMetadata, InputMetadata, OutputMetadata, PipeMetadata } from './metadata/directives';
+export { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit } from './metadata/lifecycle_hooks';
+export { ViewEncapsulation, ViewMetadata } from './metadata/view';
 import { makeDecorator, makeParamDecorator, makePropDecorator } from './util/decorators';
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ComponentMetadata.
 /**
@@ -32,6 +33,7 @@ import { makeDecorator, makeParamDecorator, makePropDecorator } from './util/dec
  * ### Example
  *
  * {@example core/ts/metadata/metadata.ts region='component'}
+ * @stable
  */
 export var Component = makeDecorator(ComponentMetadata, (fn) => fn.View = View);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from DirectiveMetadata.
@@ -412,6 +414,7 @@ export var Component = makeDecorator(ComponentMetadata, (fn) => fn.View = View);
  * Note also that although the `<li></li>` template still exists inside the `<template></template>`,
  * the instantiated
  * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
+ * @stable
  */
 export var Directive = makeDecorator(DirectiveMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ViewMetadata.
@@ -443,6 +446,7 @@ export var Directive = makeDecorator(DirectiveMetadata);
  *   }
  * }
  * ```
+ * @deprecated
  */
 var View = makeDecorator(ViewMetadata, (fn) => fn.View = View);
 /**
@@ -461,6 +465,7 @@ var View = makeDecorator(ViewMetadata, (fn) => fn.View = View);
  * A decorator can inject string literal `text` like so:
  *
  * {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
+ * @stable
  */
 export var Attribute = makeParamDecorator(AttributeMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from QueryMetadata.
@@ -570,6 +575,7 @@ export var Attribute = makeParamDecorator(AttributeMetadata);
  *
  * The injected object is an unmodifiable live list.
  * See {@link QueryList} for more details.
+ * @deprecated
  */
 export var Query = makeParamDecorator(QueryMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ContentChildrenMetadata.
@@ -592,6 +598,7 @@ export var Query = makeParamDecorator(QueryMetadata);
  *   }
  * }
  * ```
+ * @stable
  */
 export var ContentChildren = makePropDecorator(ContentChildrenMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ContentChildMetadata.
@@ -608,12 +615,22 @@ export var ContentChildren = makePropDecorator(ContentChildrenMetadata);
  * })
  * class SomeDir {
  *   @ContentChild(ChildDirective) contentChild;
+ *   @ContentChild('container_ref') containerChild
  *
  *   ngAfterContentInit() {
  *     // contentChild is set
+ *     // containerChild is set
  *   }
  * }
  * ```
+ *
+ * ```html
+ * <container #container_ref>
+ *   <item>a</item>
+ *   <item>b</item>
+ * </container>
+ * ```
+ * @stable
  */
 export var ContentChild = makePropDecorator(ContentChildMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ViewChildrenMetadata.
@@ -695,6 +712,7 @@ export var ContentChild = makePropDecorator(ContentChildMetadata);
  * ```
  *
  * See also: [ViewChildrenMetadata]
+ * @stable
  */
 export var ViewChildren = makePropDecorator(ViewChildrenMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ViewChildMetadata.
@@ -767,6 +785,7 @@ export var ViewChildren = makePropDecorator(ViewChildrenMetadata);
  * }
  * ```
  * See also: [ViewChildMetadata]
+ * @stable
  */
 export var ViewChild = makePropDecorator(ViewChildMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from ViewQueryMetadata.
@@ -804,6 +823,7 @@ export var ViewChild = makePropDecorator(ViewChildMetadata);
  *
  * The injected object is an iterable and observable live list.
  * See {@link QueryList} for more details.
+ * @deprecated
  */
 export var ViewQuery = makeParamDecorator(ViewQueryMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from PipeMetadata.
@@ -813,6 +833,7 @@ export var ViewQuery = makeParamDecorator(ViewQueryMetadata);
  * ### Example
  *
  * {@example core/ts/metadata/metadata.ts region='pipe'}
+ * @stable
  */
 export var Pipe = makeDecorator(PipeMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from InputMetadata.
@@ -856,6 +877,7 @@ export var Pipe = makeDecorator(PipeMetadata);
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export var Input = makePropDecorator(InputMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from OutputMetadata.
@@ -899,6 +921,7 @@ export var Input = makePropDecorator(InputMetadata);
  * }
  * bootstrap(App);
  * ```
+ * @stable
  */
 export var Output = makePropDecorator(OutputMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from HostBindingMetadata.
@@ -921,8 +944,8 @@ export var Output = makePropDecorator(OutputMetadata);
  * @Directive({selector: '[ngModel]'})
  * class NgModelStatus {
  *   constructor(public control:NgModel) {}
- *   @HostBinding('[class.valid]') get valid { return this.control.valid; }
- *   @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
+ *   @HostBinding('class.valid') get valid() { return this.control.valid; }
+ *   @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
  * }
  *
  * @Component({
@@ -936,6 +959,7 @@ export var Output = makePropDecorator(OutputMetadata);
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export var HostBinding = makePropDecorator(HostBindingMetadata);
 // TODO(alexeagle): remove the duplication of this doc. It is copied from HostListenerMetadata.
@@ -972,6 +996,7 @@ export var HostBinding = makePropDecorator(HostBindingMetadata);
  *
  * bootstrap(App);
  * ```
+ * @stable
  */
 export var HostListener = makePropDecorator(HostListenerMetadata);
 //# sourceMappingURL=metadata.js.map