Angular Constructor vs. ngOnInit

When I learned Angular (coming from an angularJS background) I learned to always use the lifecycle hooks provided by the library and to use the constructor of the component only for dependency injection. I don't remember if that second bit was a formal recommendation or just something I picked up along the way, but it's a "rule" I've stuck with for years now. Lately, I've been seeing more and more logic going into component constructors and it's been bothering me. A lot. So I finally decided I needed a solid understanding of what each section is for and, of course, when I learn something new I document it here so I can find it more easily later.

I know the name of the blog is "Answers I Couldn't Find Anywhere Else", but that hasn't really been the case in a long time and I did find an answer I really liked to this question so I'm going to copy it here. This is from a Medium article by "Matthew" in December 2024.

1. constructor()

• Purpose: The constructor() is a TypeScript feature and is used for initializing class members and dependency injection. It is called when an instance of the component class is created, before any Angular-specific processing begins.
• When it’s called: The constructor() is called first when the component instance is created. This happens before Angular initializes the component's inputs or runs any lifecycle hooks like ngOnInit().

Usage:

• Injecting services or dependencies into the component.
• Initializing class properties or variables (though it is not recommended to do any complex logic in the constructor).

Example:

2. ngOnInit()

• Purpose: The ngOnInit() is a lifecycle hook provided by Angular, specifically for initialization logic after Angular has set all the component's inputs and has finished setting up the component. It is typically used to perform component initialization tasks such as fetching data from APIs or executing logic that depends on the input properties being set.
• When it’s called: ngOnInit() is called after the component is created, Angular has fully initialized the inputs, and the first change detection pass has been completed. This means that by the time ngOnInit() is called, Angular has set the @Input properties and any other bindings.

Usage:

• Fetching data from a service or API.
• Performing initialization tasks that depend on the component’s inputs or properties.

Example:

Press enter or click to view image in full size

Key Differences:

Press enter or click to view image in full size

Best Practice:

• Use the constructor() for dependency injection and basic property initialization.
• Use ngOnInit() for tasks that need to occur after the component’s inputs are available, such as fetching data, setting up observables, etc.

In summary, constructor() is for basic setup and dependency injection, while ngOnInit() is for initialization that needs to occur once the component is fully set up by Angular, including having its input properties initialized.

Slight Reframe:

In the more modern versions of Angular we're no longer using the constructor for dependency injection. We should be using the `inject` structure now.