Categories: AngularJSJavascriptWeb

Angular 2 – Two Ways to Initialize Component Properties

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

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com

Next Angular 2 - Add Row Code Sample »

Previous « Angular 2 - Two Ways to Pass Data to Components

View Comments

saki says:

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.