Hooking into the component's life cycle

Components in Angular 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 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.

The following diagram shows all the phases we can hook into:

Figure 10

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...