In order to run our own logic on each one of the component life cycle events, we need to implement the desired method that corresponds to the event we want to react to. Each one of those events is published as a TypeScript interface, which we can implement in our component class. The use of TypeScript interfaces is optional and won't affect our application in any way at all. You can learn about TypeScript interfaces from the documentation on the TypeScript website at http://www.typescriptlang.org/docs/handbook/interfaces.html. We won't use this in our code examples.
The simplest, most straightforward, and most easy-to-understand life cycle event hooks are onInit
and onDestroy
.
The ngOnInit
method is called after the component data-bound properties have been checked for the first time, and ngOnDestroy
will be called right before the component instance is destroyed by Angular. In our component hierarchy, we will implement both of these methods...