5

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.

amit
  • 53
  • 1
  • 1
  • 11
  • 1
    It doesn't "work fine". You get a compilation error. Now, maybe you're ignoring it, but that's a bad idea. – JB Nizet Sep 26 '18 at 07:07
  • @JBNizet that is not true – Patricio Vargas Sep 26 '18 at 07:11
  • @JBNizet create an angular project here https://stackblitz.com/ and you will see is not even included by default and works perfectly fine – Patricio Vargas Sep 26 '18 at 07:13
  • so the question becomes, is it okay to not implement method in typescript ? – amit Sep 26 '18 at 07:14
  • 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 – Patricio Vargas Sep 26 '18 at 07:20
  • @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 – Eliseo Sep 26 '18 at 07:24
  • 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 – ShamPooSham Sep 26 '18 at 07:43
  • @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. – ShamPooSham Sep 26 '18 at 07:47
  • @ShamPooSham if thats what he meant he is correct. I even added that in my comment below my question – Patricio Vargas Sep 26 '18 at 07:49
  • @JBNizet my bad – Patricio Vargas Sep 26 '18 at 07:49
  • Using the ESLint if you just declare ngOnInit Empty: ngOnInit() {), it will throw an error because you are creating an empty method – Welyngton Dal Prá May 27 '21 at 14:37

3 Answers3

4

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

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
  • thank you for your reply, isn't implementing method necessary as per definition of implements class and interface or it is okay in typescript? – amit Sep 26 '18 at 07:11
  • 2
    If you import `OnInit` and do `export class AppComponent implements OnInit` then you have to add the `ngOnInit()` method – Patricio Vargas Sep 26 '18 at 07:18
  • why not having other lifecycle? ngAfterViewInit ngAfterContentInit, ngOnDestroy? why not implements LifeCycle instead 1 ngOnInit only – david valentino Feb 07 '20 at 14:19
1

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 cocnept 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.

Ritesh Waghela
  • 3,474
  • 2
  • 19
  • 25
1

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.

Raffaele
  • 461
  • 1
  • 7
  • 20