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
– Dan, Commented May 18, 2016 at 8:27
Hi Sarvesh, It could be better for others if you inserted your code as text. — J. Chomel
– J. Chomel, Commented May 18, 2016 at 8:27
I've edited the post to make it a little clearer and to use code rather than images for examples. — Dan
– Dan, Commented May 18, 2016 at 8:35

Thierry Templier · Accepted Answer · 2016-05-18 10:12:14Z

35

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

answered May 18, 2016 at 10:12

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dayuloli Over a year ago

See this example on the TypeScript playground for an example you can play around with.

SamV · Accepted Answer · 2016-05-18 09:09:23Z

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:

Collectives™ on Stack Overflow

When to create constructor in Angular2 typescript?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related