Angular 2 – Two Ways to Initialize Component Properties

March 9, 2016 by Ajitesh Kumar · 1 Comment
This article represents two different ways in which Angular 2 components properties can be initialized. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Following are two different ways to initialize the component properties.

  • In the example below, component’s property is initialize through variable assignment. Take a look at the code “name = ‘Calvin Hobbes'”. This approach is sometimes preferable because it makes code easy to read and also, there will be lesser code to write. 
    import {Component, View} from 'angular2/core';

@Component({
  selector: 'user'
})
@View({
  template: '{{name}}'
})
export class UserComponent {
  name = 'Calvin Hobbes';
}
  • In the code below, the property is first declared and then initialized inside the constructor. 
    import {Component, View} from 'angular2/core';

@Component({
  selector: 'user'
})
@View({
  template: '{{name}}'
})
export class UserComponent {
  name: string;

  constructor() {
    this.name = 'Calvin Hobbes';
  }
}

 

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning and BI. I would love to connect with you on Linkedin. Check out my books titled as Designing Decisions, and First Principles Thinking.
Posted in AngularJS, Javascript, Web. Tagged with , .

One Response

  • saki June 21, 2016 at 6:07 pm

    nice blog too informative. looking and reading your points its so impressive. doing more blog like this. i really appreciated doing like this.

    Reply