CODEWITHSUNDEEP
angular
Dominika Wojewska
Dominika Wojewska

Reputation: 53

Why are constrctor() and ngOnInit() not added to the component code in Angular 14?

I'm following a bit outdated tutorial as an intro to Angular (https://www.udemy.com/course/angular-for-beginners-course/learn/lecture/12538306#overview). It is using some older Angular version. I'm a total noob in Angular.

Upon creating a custom component, in the that older version of Angular that the course is using, there is a constructor() and ngOnInit(), that are not present in Angular 14. Are they deprecated or somehow used elsewhere, or simply not generated by Angular CLI automatically anymore? What is the reason for this difference in the generated component code?

Here the code: (Angular 14)

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

@Component({
  selector: 'course-card',
  templateUrl: './course-card.component.html',
  styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {

}

(older version)

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

@Component({
  selector: 'course-card',
  templateUrl: './course-card.component.html',
  styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent implements OnInit {

constructor() { }
ngOnInit() { }
}

Upvotes: 3

Views: 4286

Answers (5)

manjeet lama
manjeet lama

Reputation: 305

I understand that many devs have doubts about removing ngOnInit() but find it reasonable to remove the constructor. In my experience, I have primarily used the constructor for Dependency Injection (DI), which can now be accomplished using the inject() method provided by Angular. This approach is considered superior to constructor-based DI in most cases.

using constructor()

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

    @Component({
      selector: 'app-using-constructor',
      templateUrl: './using-constructor.component.html',
      styleUrls: ['./using-constructor.component.scss']
    })
    export class UsingConstructorComponent {
        constructor(private messageService: MessageService) {
      }
    }

using inject()

 import { Component, inject } from '@angular/core';
 import { MessageService } from 'primeng/api';
    @Component({
      selector: 'app-using-inject',
      templateUrl: './using-inject.component.html',
      styleUrls: ['./using-inject.component.scss']
    })
    export class UsingInjectComponent {
          private messageService = inject(MessageService);
    }

Upvotes: 1

Joosep Parts
Joosep Parts

Reputation: 6235

With Angular CLI: 14 ng version | ng v upon executing ng g c test to generate a component named "test" the output has expected constructor and ngOnInit().

As of Angular CLI 15 ng g c test no longer includes constructor and ngOnInit() in the default generation output.

Whether this change is good or bad, time will tell. To generate constructor and ngOnInit() with components you'd have to modify schematics or downgrade to Angular CLI 14.

Here's the recap:

https://blog.ninja-squad.com/2022/11/16/angular-cli-15.0/

https://indepth.dev/posts/1508/structure-initialization-logic-without-ngoninit-utilize-observables-and-ngonchanges

Upvotes: 1

Luigi Woodhouse
Luigi Woodhouse

Reputation: 391

As time goes by , angular versions get updated and so components generated no longer have constructor and ngOnInit in the newer versions of Angular. I suspect this was done to crunch down on boilerplate code seeing as you only need to use them when you are doing dependency injection and lifecycle hooking. Other than that, they are not deprecated at all.

Upvotes: 1

kvetis
kvetis

Reputation: 7341

The constructor and ngOnInit were removed from generated component, because Angular programmers (including myself) preferred to add these only when needed. They are not deprecated.

See the pull request removing it.

Upvotes: 1

Antoniossss
Antoniossss

Reputation: 32517

constructor is a part of Typescript, and ngOnInit() is still valid component lifecycle hook.

Neither of those are mandatory (now and in older versions of angular) in order for component to work and some lint configurations (maybe even the default one provided with the skeleton app) yelds an error for empty method definitions.

I guess this is the reason (both beeing non mandatory).

Upvotes: 1

Related Questions