afterRender
Register a callback to be invoked each time the application finishes rendering.
afterRender(callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef
Parameters
callback
|
VoidFunction |
A callback function to register |
options
|
AfterRenderOptions |
Optional. Default is |
Returns
Description
You should always explicitly specify a non-default phase, or you risk significant performance degradation.
Note that the callback will run
- in the order it was registered
- once per render
- on browser platforms only
Components are not guaranteed to be hydrated before the callback runs. You must use caution when directly reading or writing the DOM and layout.
Further information is available in the Usage Notes...
Usage notes
Use afterRender to read or write the DOM after each render.
Example
@Component({
selector: 'my-cmp',
template: `<span #content>{{ ... }}</span>`,
})
export class MyComponent {
@ViewChild('content') contentRef: ElementRef;
constructor() {
afterRender(() => {
console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
}, {phase: AfterRenderPhase.Read});
}
}