title: Angular2 - Unresolved Variables
body: <p>Complete noob looking for help,
  I've been learning Angular2 and attempting to make a basic app but now its broken!</p>
  
  <p>The component.ts file</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import { Player } from './player.model';
  
  @Component({
   selector : 'app-player',
   templateUrl : '/player.component.html'
  })
  
  export class PlayerComponent implements OnInit {
  
    players: Player[] = [
    new Player('Malus', 'Lina', 'lol', 3000)
  ];
  
    constructor() {}
   ngOnInit() {}
  
  }
  </code></pre>
  
  <p>model.ts</p>
  
  <pre><code>export class Player {
    public playerName: string;
    public favHero: string;
    public heroImage: string;
    public mmr: number;
  
    constructor( name: string, favHero: string, heroImage: string, mmr: number) {
      this.playerName = name;
      this.favHero = favHero;
      this.heroImage = heroImage;
      this.mmr =  mmr;
    }
  }
  </code></pre>
  
  <p>lastly where the error is in the HTML</p>
  
  <p>I am trying to use <code>{{ players.playerName }}</code> etc but they are unresolved? I think this is why my app is broken now</p>
  
  <p>apparently, the variables of my array are unresolved?. I don't get it and cant work out why.
  Appreciate any help thanks</p>