When to create constructor in Angular2 typescript?

Question

Here are some example constructors from the Angular 2 docs:

export class AppComponent implements OnInit {
    title = 'Tour of heroes';
    heroes: Hero[];
    selectedHero: Hero;

    constructor(private heroService: HeroService) { }

    getHeroes() {
        this.HeroService.getHeroes().then(heroes => this.heroes = heroes);
    }
}

and...

class Car {
    constructor(engine, tires, doors){
        this.engine = engine;
        this.tires = tires;
        this.doors = doors;
    }
}

I don't understand Why and When to create a constructor() in angular 2 /typescript (I've read the official documentation where they create a constructor for Dependency Injection and for Services).

+1. I struggle to know what should be in a constructor (apart from "as little as possible") and what shouldn't. I guess it's a wider programming concept but my reading hasn't yielded anything particularly clear which describes constructors and their purpose in a simple way. — Dan, May 18 '16 at 08:27
Hi Sarvesh, It could be better for others if you inserted your code as text. — J. Chomel, May 18 '16 at 08:27
I've edited the post to make it a little clearer and to use code rather than images for examples. — Dan, May 18 '16 at 08:35

score 35 · Accepted Answer · answered May 18 '16 at 10:12

Constructors define which parameters to provide when instantiate your objects. In TypeScript, you can also add modifiers like private or public to define in the same time class properties and set their values with the provided ones.

For example:

class Car {
  constructor(private engine:string, private tires:string, private doors:number){
  }
}

is similar to:

class Car {
  constructor(engine:string, tires:string, doors:number){
    this.engine = engine;
    this.tires = tires;
    this.doors = doors;
  }
}

In Angular2 constructors are used for dependency injection. The associated decorator (@Component or Injectable) collects metadata (types or hints within @Inject) to determine what to provide to the object to instantiate.

Be aware that constructors aren't part of the component lifecycle. Properties can be set later by Angular2 at this level...

See [this example](https://www.typescriptlang.org/play/#src=class%20Rectangle%20%7B%0D%0A%20%20constructor(private%20height%3Anumber%2C%20private%20width%3Anumber)%7B%0D%0A%20%20%7D%0D%0A%7D) on the TypeScript playground for an example you can play around with. — dayuloli, Feb 28 '17 at 14:01

SamV · Answer 2 · 2016-05-18T09:09:23.793

Controller constructors are mainly used for dependency injection / services as you mentioned and also (in my apps) for initializing complex default values based off the services themselves. Since the constructor runs before the controllers template is initialized - no variables will be rendered accurately, hence the need for ngOnInit and other similar methods. These 'bootstrap' methods should be used to perform the normal 'constructing' duties so the template/view can access the data.

Regarding service constructors, a few of mine use the constructor normally and initialize various parts of the service based off existing user data as they act a lot more like standard classes.

These answers will be of help:

When to create constructor in Angular2 typescript?

2 Answers2