Component life cycle

Each component rendered by Angular has its own life cycle: it is initialized, checked for changes, and destroyed (among other events). Angular provides a hook method, where we can insert application code to participate in the component life cycle. These methods are available through TypeScript function interfaces that can be optionally implemented by the component class, and they are as follows:

• ngOnChanges: This is called once data-bound component properties get initialized before ngOnInit and each time data-bound component properties are changed. It is also part of the directive life cycle (the convention is that the interface implementation function name has the ng prefix added to the interface name; for example, ngOnInit and OnInit).
• ngOnInit: This is called once after the first ngOnChanges and when data-bound component properties and input properties are all initialized. It is also part of the directive life cycle.
• ngDoCheck: This is called as part of the Angular change...