inputing data with angularjs 2 using services
<p>So I'm learning angularjs 2 and having trouble understanding the uses of service and getting it to work with my app.</p>

<p>film.services.ts </p>

<pre><code>   import { Injectable } from "@angular/core";

import { Film } from './film';
import { FILMS } from './mock-films';

@Injectable()
export class FilmService {
  getFilms(): Promise&lt;Film[]&gt; {
    return Promise.resolve(FILMS)
  }
}
</code></pre>

<p>mock-films</p>

<pre><code>import { Film } from './film';

//storing the data in array
export const FILMS: Film[] = [
  {id:11, title: 'pokemon', summary:'great'},
  {id:12, title: 'naruto', summary: 'good'},
  {id:13, title: 'bleach', summmary: 'meh'},
  {id:14, title: 'one piece', summary: 'not bad'}
];
</code></pre>

<p>film-list.components.ts</p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { FilmService } from '../film.service';
import { Film } from "../film";

@Component({
  template: `
  &lt;h1&gt;List of Films&lt;/h1&gt;
  &lt;p&gt;Films:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let film of films "&gt;
     &lt;a [routerLink]="['/films', film.id]"&gt;{{film.title}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p *ngIf="films.length &gt; 3"&gt;There are many vietnamese films to learn about!&lt;/p&gt;
`,
  // important when adding to service other crashes
  providers: [FilmService]
})

//Component class
export class FilmListComponent implements OnInit {
  public films: Film[];
  constructor(private filmService: FilmService) {}

  getFilms(){
    this.filmService.getFilms().then((films: Film[]) =&gt; this.films = films);
  }

  ngOnInit():any {
    this.getFilms()
  }
}
</code></pre>

<p>so my goal is getting the data from my mock-films into my film list but it is not showing up for some reason. It probably the film-list.component.ts but not sure where the error is.</p>