title: angular4 typescript classes, 3 methods to create an instance, tutorial hero
body: <p>I'm practicing typescript with angular, and I need to see how to work with 3 different methods to create an instance. I took like the example angular hero tutorial to create the first instance: hero1, and but I don't get that hero2 and hero3 works. I'm trying print 3 hero's name on the template.</p>
  
  <p>the code:</p>
  
  <p>app.component.js</p>
  
  <pre><code>import { Component } from '@angular/core';
  export class Hero {
    id: number;
    name: string;
  }
  hero: Hero = {
    id: 1,
    name: 'Flash'
  }
  @Component({
    selector: 'my-app',
    template: `&lt;h1&gt;{{title}}&lt;/h1&gt;&lt;h2&gt;Hero1: {{hero.name}} , Hero2:  {{hero2.name}} , Hero3: {{hero3.name}}&lt;/h2&gt;`,
  })
  export class AppComponent    {
    public hero2: Hero;
    public hero3;
  
    title = 'Tour of Heros';
    ngOnInit() {
      this.hero2  =  {
        id: 2,
        name: 'Superman'
      };
      this.hero3  = new (3, 'Spiderman') ;
    }
  }
  </code></pre>
  
  <p>Here the code solved using 3 methods (thanks to the answers):</p>
  
  <pre><code>import { Component } from '@angular/core';
  export class Hero {
    id: number;
    name: string;
    constructor(id: number, name: string) {
      this.id = id;
      this.name = name;
    }
  }
  
  @Component({
    selector: 'my-app',
    template: `&lt;h1&gt;{{title}}&lt;/h1&gt;&lt;h2&gt;Hero1: {{hero.name}} , Hero2:  {{hero2.name}} , Hero3: {{hero3.name}}&lt;/h2&gt;`,
  })
  export class AppComponent    {
    hero: Hero = {
      id: 1,
      name: 'Flash'
    }
    title = 'Tour of Heros';
    public hero2: Hero;
    public hero3: Hero;
  
  
    ngOnInit() {
      this.hero2  =  {
        id: 2,
        name: 'Superman'
      };
      this.hero3  = new Hero (3, 'Spiderman') ;
    }
  }
  </code></pre>