2015-11-06 20:34:07 -05:00
|
|
|
import {MapWrapper} from 'angular2/src/facade/collection';
|
2015-09-23 14:43:31 -04:00
|
|
|
import {SimpleChange} from 'angular2/src/core/change_detection/change_detection_util';
|
2015-05-22 16:14:59 -04:00
|
|
|
|
2015-09-11 17:23:24 -04:00
|
|
|
export enum LifecycleHooks {
|
|
|
|
OnInit,
|
|
|
|
OnDestroy,
|
|
|
|
DoCheck,
|
|
|
|
OnChanges,
|
|
|
|
AfterContentInit,
|
|
|
|
AfterContentChecked,
|
|
|
|
AfterViewInit,
|
|
|
|
AfterViewChecked
|
|
|
|
}
|
|
|
|
|
2015-09-24 18:40:50 -04:00
|
|
|
/**
|
2015-10-02 16:32:48 -04:00
|
|
|
* @internal
|
2015-09-24 18:40:50 -04:00
|
|
|
*/
|
2015-09-18 13:33:23 -04:00
|
|
|
export var LIFECYCLE_HOOKS_VALUES = [
|
|
|
|
LifecycleHooks.OnInit,
|
|
|
|
LifecycleHooks.OnDestroy,
|
|
|
|
LifecycleHooks.DoCheck,
|
|
|
|
LifecycleHooks.OnChanges,
|
|
|
|
LifecycleHooks.AfterContentInit,
|
|
|
|
LifecycleHooks.AfterContentChecked,
|
|
|
|
LifecycleHooks.AfterViewInit,
|
|
|
|
LifecycleHooks.AfterViewChecked
|
|
|
|
];
|
|
|
|
|
2015-05-22 16:14:59 -04:00
|
|
|
/**
|
2015-08-31 21:32:32 -04:00
|
|
|
* Lifecycle hooks are guaranteed to be called in the following order:
|
|
|
|
* - `OnChanges` (if any bindings have changed),
|
|
|
|
* - `OnInit` (after the first check only),
|
|
|
|
* - `DoCheck`,
|
|
|
|
* - `AfterContentInit`,
|
|
|
|
* - `AfterContentChecked`,
|
2015-09-24 18:40:50 -04:00
|
|
|
* - `AfterViewInit`,
|
|
|
|
* - `AfterViewChecked`,
|
2015-08-31 21:32:32 -04:00
|
|
|
* - `OnDestroy` (at the very end before destruction)
|
2015-05-22 16:14:59 -04:00
|
|
|
*/
|
2015-05-27 11:07:37 -04:00
|
|
|
|
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified when any data-bound property of your directive changes.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* `ngOnChanges` is called right after the data-bound properties have been checked and before view
|
2015-09-24 18:40:50 -04:00
|
|
|
* and content children are checked if at least one of them has changed.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* The `changes` parameter contains an entry for each of the changed data-bound property. The key is
|
|
|
|
* the property name and the value is an instance of {@link SimpleChange}.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'my-cmp',
|
|
|
|
* template: `<p>myProp = {{myProp}}</p>`
|
|
|
|
* })
|
2015-08-31 21:32:32 -04:00
|
|
|
* class MyComponent implements OnChanges {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() myProp: any;
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngOnChanges(changes: {[propName: string]: SimpleChange}) {
|
|
|
|
* console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue);
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <button (click)="value = value + 1">Change MyComponent</button>
|
|
|
|
* <my-cmp [my-prop]="value"></my-cmp>`,
|
|
|
|
* directives: [MyComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* value = 0;
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
|
|
|
* ```
|
2015-05-27 11:07:37 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange}); }
|
2015-05-27 11:07:37 -04:00
|
|
|
|
2015-05-27 13:14:37 -04:00
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to execute custom initialization logic after your directive's
|
|
|
|
* data-bound properties have been initialized.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* `ngOnInit` is called right after the directive's data-bound properties have been checked for the
|
2015-09-24 18:40:50 -04:00
|
|
|
* first time, and before any of its children have been checked. It is invoked only once when the
|
|
|
|
* directive is instantiated.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'my-cmp',
|
|
|
|
* template: `<p>my-component</p>`
|
|
|
|
* })
|
2015-09-24 18:40:50 -04:00
|
|
|
* class MyComponent implements OnInit, OnDestroy {
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngOnInit() {
|
|
|
|
* console.log('ngOnInit');
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngOnDestroy() {
|
|
|
|
* console.log('ngOnDestroy');
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <button (click)="hasChild = !hasChild">
|
|
|
|
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
|
|
|
|
* </button>
|
|
|
|
* <my-cmp *ng-if="hasChild"></my-cmp>`,
|
|
|
|
* directives: [MyComponent, NgIf]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* hasChild = true;
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
2015-08-31 21:32:32 -04:00
|
|
|
* ```
|
2015-05-27 13:14:37 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface OnInit { ngOnInit(); }
|
2015-05-27 13:14:37 -04:00
|
|
|
|
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to override the default change detection algorithm for your directive.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* `ngDoCheck` gets called to check the changes in the directives instead of the default algorithm.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* The default change detection algorithm looks for differences by comparing bound-property values
|
|
|
|
* by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* is disabled and `ngDoCheck` is responsible for checking for changes.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implementing this interface allows improving performance by using insights about the component,
|
|
|
|
* its implementation and data types of its properties.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* `ngOnChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
|
|
|
|
* have to be handled from within the `ngDoCheck` callback.
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
|
|
|
* Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
|
|
|
|
*
|
|
|
|
* ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* In the following example `ngDoCheck` uses an {@link IterableDiffers} to detect the updates to the
|
2015-09-24 18:40:50 -04:00
|
|
|
* array `list`:
|
|
|
|
*
|
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'custom-check',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <p>Changes:</p>
|
|
|
|
* <ul>
|
|
|
|
* <li *ng-for="#line of logs">{{line}}</li>
|
|
|
|
* </ul>`,
|
|
|
|
* directives: [NgFor]
|
|
|
|
* })
|
|
|
|
* class CustomCheckComponent implements DoCheck {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() list: any[];
|
2015-09-24 18:40:50 -04:00
|
|
|
* differ: any;
|
|
|
|
* logs = [];
|
|
|
|
*
|
|
|
|
* constructor(differs: IterableDiffers) {
|
|
|
|
* this.differ = differs.find([]).create(null);
|
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngDoCheck() {
|
2015-09-24 18:40:50 -04:00
|
|
|
* var changes = this.differ.diff(this.list);
|
|
|
|
*
|
|
|
|
* if (changes) {
|
|
|
|
* changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
|
|
|
|
* changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
|
|
|
|
* }
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <button (click)="list.push(list.length)">Push</button>
|
|
|
|
* <button (click)="list.pop()">Pop</button>
|
|
|
|
* <custom-check [list]="list"></custom-check>`,
|
|
|
|
* directives: [CustomCheckComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* list = [];
|
|
|
|
* }
|
|
|
|
* ```
|
2015-05-27 13:14:37 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface DoCheck { ngDoCheck(); }
|
2015-05-27 13:14:37 -04:00
|
|
|
|
2015-08-28 21:11:04 -04:00
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified when your directive is destroyed.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* `ngOnDestroy` callback is typically used for any custom cleanup that needs to occur when the
|
2015-09-24 18:40:50 -04:00
|
|
|
* instance is destroyed
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
|
|
|
|
*
|
|
|
|
* ```typesript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'my-cmp',
|
|
|
|
* template: `<p>my-component</p>`
|
|
|
|
* })
|
2015-09-24 18:40:50 -04:00
|
|
|
* class MyComponent implements OnInit, OnDestroy {
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngOnInit() {
|
|
|
|
* console.log('ngOnInit');
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngOnDestroy() {
|
|
|
|
* console.log('ngOnDestroy');
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <button (click)="hasChild = !hasChild">
|
|
|
|
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
|
|
|
|
* </button>
|
|
|
|
* <my-cmp *ng-if="hasChild"></my-cmp>`,
|
|
|
|
* directives: [MyComponent, NgIf]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* hasChild = true;
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
2015-11-03 06:47:16 -05:00
|
|
|
* ```
|
2015-08-28 21:11:04 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface OnDestroy { ngOnDestroy(); }
|
2015-08-28 21:11:04 -04:00
|
|
|
|
2015-05-27 11:07:37 -04:00
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified when your directive's content has been fully
|
|
|
|
* initialized.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'child-cmp',
|
|
|
|
* template: `{{where}} child`
|
|
|
|
* })
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ChildComponent {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() where: string;
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'parent-cmp',
|
|
|
|
* template: `<ng-content></ng-content>`
|
|
|
|
* })
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ParentComponent implements AfterContentInit {
|
|
|
|
* @ContentChild(ChildComponent) contentChild: ChildComponent;
|
|
|
|
*
|
|
|
|
* constructor() {
|
|
|
|
* // contentChild is not initialized yet
|
|
|
|
* console.log(this.getMessage(this.contentChild));
|
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngAfterContentInit() {
|
2015-09-24 18:40:50 -04:00
|
|
|
* // contentChild is updated after the content has been checked
|
|
|
|
* console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* private getMessage(cmp: ChildComponent): string {
|
|
|
|
* return cmp ? cmp.where + ' child' : 'no child';
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <parent-cmp>
|
|
|
|
* <child-cmp where="content"></child-cmp>
|
|
|
|
* </parent-cmp>`,
|
|
|
|
* directives: [ParentComponent, ChildComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
|
|
|
* ```
|
2015-05-27 11:07:37 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface AfterContentInit { ngAfterContentInit(); }
|
2015-08-28 21:11:04 -04:00
|
|
|
|
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified after every check of your directive's content.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({selector: 'child-cmp', template: `{{where}} child`})
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ChildComponent {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() where: string;
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({selector: 'parent-cmp', template: `<ng-content></ng-content>`})
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ParentComponent implements AfterContentChecked {
|
|
|
|
* @ContentChild(ChildComponent) contentChild: ChildComponent;
|
|
|
|
*
|
|
|
|
* constructor() {
|
|
|
|
* // contentChild is not initialized yet
|
|
|
|
* console.log(this.getMessage(this.contentChild));
|
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngAfterContentChecked() {
|
2015-09-24 18:40:50 -04:00
|
|
|
* // contentChild is updated after the content has been checked
|
|
|
|
* console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* private getMessage(cmp: ChildComponent): string {
|
|
|
|
* return cmp ? cmp.where + ' child' : 'no child';
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <parent-cmp>
|
|
|
|
* <button (click)="hasContent = !hasContent">Toggle content child</button>
|
|
|
|
* <child-cmp *ng-if="hasContent" where="content"></child-cmp>
|
|
|
|
* </parent-cmp>`,
|
|
|
|
* directives: [NgIf, ParentComponent, ChildComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* hasContent = true;
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
|
|
|
* ```
|
2015-08-28 21:11:04 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface AfterContentChecked { ngAfterContentChecked(); }
|
2015-08-28 21:11:04 -04:00
|
|
|
|
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified when your component's view has been fully initialized.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({selector: 'child-cmp', template: `{{where}} child`})
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ChildComponent {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() where: string;
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'parent-cmp',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `<child-cmp where="view"></child-cmp>`,
|
|
|
|
* directives: [ChildComponent]
|
|
|
|
* })
|
|
|
|
* class ParentComponent implements AfterViewInit {
|
|
|
|
* @ViewChild(ChildComponent) viewChild: ChildComponent;
|
|
|
|
*
|
|
|
|
* constructor() {
|
|
|
|
* // viewChild is not initialized yet
|
|
|
|
* console.log(this.getMessage(this.viewChild));
|
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngAfterViewInit() {
|
2015-09-24 18:40:50 -04:00
|
|
|
* // viewChild is updated after the view has been initialized
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* console.log('ngAfterViewInit: ' + this.getMessage(this.viewChild));
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
|
|
|
* private getMessage(cmp: ChildComponent): string {
|
|
|
|
* return cmp ? cmp.where + ' child' : 'no child';
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `<parent-cmp></parent-cmp>`,
|
|
|
|
* directives: [ParentComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
|
|
|
* ```
|
2015-08-28 21:11:04 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface AfterViewInit { ngAfterViewInit(); }
|
2015-08-31 21:32:32 -04:00
|
|
|
|
|
|
|
/**
|
2015-09-24 18:40:50 -04:00
|
|
|
* Implement this interface to get notified after every check of your component's view.
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
|
2015-08-31 21:32:32 -04:00
|
|
|
*
|
2015-09-24 18:40:50 -04:00
|
|
|
* ```typescript
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({selector: 'child-cmp', template: `{{where}} child`})
|
2015-09-24 18:40:50 -04:00
|
|
|
* class ChildComponent {
|
2015-10-10 13:04:13 -04:00
|
|
|
* @Input() where: string;
|
2015-09-24 18:40:50 -04:00
|
|
|
* }
|
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'parent-cmp',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `
|
|
|
|
* <button (click)="showView = !showView">Toggle view child</button>
|
|
|
|
* <child-cmp *ng-if="showView" where="view"></child-cmp>`,
|
|
|
|
* directives: [NgIf, ChildComponent]
|
|
|
|
* })
|
|
|
|
* class ParentComponent implements AfterViewChecked {
|
|
|
|
* @ViewChild(ChildComponent) viewChild: ChildComponent;
|
|
|
|
* showView = true;
|
|
|
|
*
|
|
|
|
* constructor() {
|
|
|
|
* // viewChild is not initialized yet
|
|
|
|
* console.log(this.getMessage(this.viewChild));
|
|
|
|
* }
|
|
|
|
*
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
* ngAfterViewChecked() {
|
2015-09-24 18:40:50 -04:00
|
|
|
* // viewChild is updated after the view has been checked
|
|
|
|
* console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* private getMessage(cmp: ChildComponent): string {
|
|
|
|
* return cmp ? cmp.where + ' child' : 'no child';
|
2015-08-31 21:32:32 -04:00
|
|
|
* }
|
|
|
|
* }
|
2015-09-24 18:40:50 -04:00
|
|
|
*
|
2015-10-11 10:41:19 -04:00
|
|
|
* @Component({
|
|
|
|
* selector: 'app',
|
2015-09-24 18:40:50 -04:00
|
|
|
* template: `<parent-cmp></parent-cmp>`,
|
|
|
|
* directives: [ParentComponent]
|
|
|
|
* })
|
|
|
|
* export class App {
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* bootstrap(App).catch(err => console.error(err));
|
|
|
|
* ```
|
2015-08-31 21:32:32 -04:00
|
|
|
*/
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
export interface AfterViewChecked { ngAfterViewChecked(); }
|