2015-11-06 07:26:24 -05:00
|
|
|
@cheatsheetSection
|
|
|
|
Directive and component change detection and lifecycle hooks
|
2015-11-13 02:14:12 -05:00
|
|
|
@cheatsheetIndex 8
|
2015-11-06 07:26:24 -05:00
|
|
|
@description
|
2015-12-12 22:17:26 -05:00
|
|
|
{@target ts dart}(implemented as class methods){@endtarget}
|
|
|
|
{@target js}(implemented as component properties){@endtarget}
|
2015-11-06 07:26:24 -05:00
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts):
|
2015-11-06 07:26:24 -05:00
|
|
|
`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`constructor: function(MyService, ...) { ... }`|`constructor: function(MyService, ...)`
|
2015-12-09 13:22:40 -05:00
|
|
|
syntax(dart):
|
|
|
|
`MyAppComponent(MyService myService, ...) { ... }`|`MyAppComponent(MyService myService, ...)`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-11-06 07:26:24 -05:00
|
|
|
The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngOnChanges: function(changeRecord) { ... }`|`ngOnChanges: function(changeRecord)`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-11-06 07:26:24 -05:00
|
|
|
Called after every change to input properties and before processing content or child views.
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngOnInit()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngOnInit: function() { ... }`|`ngOnInit: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
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
|
|
|
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
|
2015-11-06 07:26:24 -05:00
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngDoCheck()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngDoCheck: function() { ... }`|`ngDoCheck: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-11-06 07:26:24 -05:00
|
|
|
Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngAfterContentInit()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngAfterContentInit: function() { ... }`|`ngAfterContentInit: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
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
|
|
|
Called after ngOnInit when the component's or directive's content has been initialized.
|
2015-11-06 07:26:24 -05:00
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngAfterContentChecked()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-11-06 07:26:24 -05:00
|
|
|
Called after every check of the component's or directive's content.
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngAfterViewInit()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngAfterViewInit: function() { ... }`|`ngAfterViewInit: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
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
|
|
|
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
|
2015-11-06 07:26:24 -05:00
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngAfterViewChecked()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngAfterViewChecked: function() { ... }`|`ngAfterViewChecked: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-11-06 07:26:24 -05:00
|
|
|
Called after every check of the component's view. Applies to components only.
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(ts dart):
|
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() { ... }`|`ngOnDestroy()`
|
2015-12-12 22:17:26 -05:00
|
|
|
syntax(js):
|
|
|
|
`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
|
2015-12-09 07:33:42 -05:00
|
|
|
description:
|
2015-12-09 13:22:40 -05:00
|
|
|
Called once, before the instance is destroyed.
|