Hooking into the component's life cycle - FadiZahhar/switchingtoangular2 GitHub Wiki

Components in Angular 2 have a well-defined life cycle, which allows us to hook into different phases of it and have further control over our application. We can do this by implementing specific methods in the component's controller. In order to be more explicit, thanks to the expressiveness of TypeScript, we can implement different interfaces associated with the life cycle's phases. Each of these interfaces has a single method, which is associated with the phase itself. Although code written with explicit interface implementation will have better semantics, since Angular 2 supports ES5 as well within the component, we can simply define methods with the same names as the life cycle hooks (but this time, prefixed with ng) and take advantage of duck typing.

Let's take a look at the different life cycle hooks: • OnChanges: This hook will be invoked once a change in the input properties of a given component has been detected. For instance, let's take a look at the following component: @Component({ selector: 'panel', inputs: ['title'] }) class Panel {…} We can use it like this: <panel [title]="expression">

Once the value of the expression associated with the [title] attribute has been changed, the ngOnChanges hook will be invoked. We can implement it using this code snippet: @Component(…) class Panel { ngOnChanges(changes) { Object.keys(changes).forEach(prop => { console.log(prop, 'changed. Previous value', changes[prop]. previousValue); }); } } The preceding snippet will display all the changed bindings and their old values. In order to be more explicit in the implementation of the hook, we can use interfaces: import {Component, OnChanges} from 'angular2/core'; @Component(…) class Panel implements OnChanges { ngOnChanges(changes) {…} } All the interfaces representing the individual life cycle hooks define a single method with the name of the interface itself prefixed with ng. In the upcoming list, we'll use the term life cycle hook, both for interface and/or the method, except if we won't imply anything specifically for only one of them. • OnInit: This hook will be invoked once the given component has been initialized. We can implement it using the OnInit interface with its ngOnInit method. • DoCheck: This will be invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component. Note that DoCheck and OnChanges should not be implemented together on the same directive. • OnDestroy: If we implement the OnDestroy interface with its single ngOnDestroy method, we can hook into the destroy life cycle phase of a component. This method will be invoked once the component is detached from the component tree.

Now, let's take a look at the life cycle hooks associated with the component's content and view children: • AfterContentInit: If we implement the ngAfterContentInit life cycle hook, we will be notified when the component's content has been fully initialized. This is the phase when the properties decorated with ContentChild or ContentChildren will be initialized. • AfterContentChecked: By implementing this hook, we'll get notified each time the content of the given component has been checked by the change detection mechanism of Angular 2. • AfterViewInit: If we implement the ngAfterViewInit life cycle hook, we will be notified when the component's view has been fully initialized. This is the phase when the properties decorated with ViewChild or ViewChildren will be initialized. • AfterViewChecked: This is similar to AfterContentChecked. The AfterViewChecked hook will be invoked once the view of your component has been checked.