Performing Component Initialization

In this lesson, we will understand the hooks of component lifecycle. Let’s start with the OnInit hook, which is the most basic lifecycle event of a component.

The OnInit lifecycle hook implements the ngOnInit method, which is called during the component initialization. At this stage, all input bindings and data-bound properties have been set appropriately, and we can safely use them. Using the component constructor to access them may be tempting, but their values would not have been set at that point. We will understand the previous concept using the following example:

1. Open the product-detail.component.ts file and add a constructor that logs the value of the name property in the browser console: