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.
The following diagram shows all the phases we can hook into:
Figure 8
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 is detected. For instance, let's take a look at the following component:
@Component({
selector: 'panel&apos...
