show details of movie

src/app/films/films.component.html

@@ -1,6 +1,16 @@
 <h2>List of Star Wars Films</h2>
 <ul>
-    <li *ngFor="let film of films">
+    <li *ngFor="let film of films" (click)="selectFilm(film)">
         {{film.title}}
     </li>
 </ul>
+<section *ngIf="selectedFilm">
+    <h2>Deatils for {{selectedFilm.title}}</h2>
+    <h3>Info</h3>
+    <dl>
+        <dt>Director</dt>
+        <dd>{{selectedFilm.director}}</dd>
+        <dt>Producer</dt>
+        <dd>{{selectedFilm.producer}}</dd>
+    </dl>
+</section>

src/app/films/films.component.ts

@@ -10,9 +10,14 @@ import 'rxjs/add/operator/toPromise';
 })
 export class FilmsComponent implements OnInit {
   films;
+  selectedFilm;
 
   constructor(private http: Http) { }
 
+  selectFilm(film){
+      this.selectedFilm = film;
+  }
+
   ngOnInit() {
     this.http.get('http://swapi.co/api/films/')
       .toPromise()