what is the purpose of implementing OnInit class, removing ngOnInit works fine?

Question

In angular 6 when we create a component the the .ts file of that component has a class which implements the OnInit class but when we remove the default method(ngOnInit), it works fine. so my question is if it implements some class then it must had some method which had to be implemented in this implemented class, if this is not necessary to have methods then what is the purpose to implement OnInit class.

Creon

It doesn't "work fine". You get a compilation error. Now, maybe you're ignoring it, but that's a bad idea. – Fellers

@JBNizet that is not true – Elemi

@JBNizet create an angular project here stackblitz.com and you will see is not even included by default and works perfectly fine – Elemi

so the question becomes, is it okay to not implement method in typescript ? – Creon

it's not about if its okay or not, it just good practice to do it. Even if I don't use it I add it – Elemi

@amit, if you needn't it you not implements it. (e.g. in a pipe or a service you has not onInit). The "good practice" is not use the constructor to initialize variables else ngOnInit, but if you needn't initialize variables or subscribe not need implements onInit – Paxton

Typescript might give you compile errors while still working. The errors are there to help you not make common mistakes, such as forgetting to implement an interface. But since javascript doesn't have the concept of interfaces and typescript can't map it to any concept in javascript, it will still output valid javascript – Racecourse

@PatricioVargas "That is not true": I think JBNizet means that if a class implements OnInit, it has to include an ngOnInit method, otherwise there will be compilation errors (although the application will still work, which is what OP said in the question). JBNizet is absolutely correct about that. – Racecourse

@Racecourse if thats what he meant he is correct. I even added that in my comment below my question – Elemi

@JBNizet my bad – Elemi

Using the ESLint if you just declare ngOnInit Empty: ngOnInit() {), it will throw an error because you are creating an empty method – Landscapist

Answer 1

ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.

We import OnInit in order to use it, implementing OnInit is not mandatory but considered good practice):

import {Component, OnInit} from '@angular/core';

We use ngOnInit to do something after the component has been created. for example you can set variables here, call methods etc.

https://angular.io/api/core/OnInit

If you import OnInit and do export class AppComponent implements OnInit then you have to add the ngOnInit() method otherwise you will have a compilation error

Elemi

thank you for your reply, isn't implementing method necessary as per definition of implements class and interface or it is okay in typescript? – Creon

If you import OnInit and do export class AppComponent implements OnInit then you have to add the ngOnInit() method – Elemi

why not having other lifecycle? ngAfterViewInit ngAfterContentInit, ngOnDestroy? why not implements LifeCycle instead 1 ngOnInit only – Magical

Answer 2

OnInit is not a class but an interface provided by the framework so that if you want to do something when a component is initialized you can provide an ngOnInit() method in your class and have your code there. More on ngOnInt: https://angular.io/api/core/OnInit

If you have implemented OnInit interface but have not provided the ngOnInit you will get a compilation error, in your code thrown by VSCode or some other editor.

Something like below:

Class 'ClaimComponent' incorrectly implements interface 'OnInit'. Property 'ngOnInit' is missing in type 'GiftingClaimComponent'.

However it will run fine as eventually the TS code compiles down to JavaScript.

And since JavaScript has no such type safety or the concept of interfaces that we get in TypeScript. However if you try to create an AOT build of your application it will fail and you will have to provide the implementation.

Triune

Answer 3

As @Patricio Vargas say, if u export your class component that implements the OnInit interface, you'll need to implement the ngOnInit() method, otherwise you'll get error TS2420 (You can try of course on stackblitz by simply implementing the OnInit interface inside the default AppComponent provided for Angular projects.

Regarding the second point, the purpose of implementing that interface, you should keep in mind the 2 phase of Angular bootstrap:

1. Component tree construction
2. Changes detection

It's a good practice (sometimes needed) to initialize your component using the OnInit hook and not inside the constructor (that instead must be used for DI), mostly because the constructor invocation is part of the 'Angular component tree construction', and then input bindings will not be available inside the constructor (since they are part of the detection change phase.

Cochineal