showing characters in a film

src/app/films/films.component.html

@@ -13,4 +13,11 @@
         <dt>Producer</dt>
         <dd>{{selectedFilm.producer}}</dd>
     </dl>
+    <button (click)="showCharacters(selectedFilm)">View Characters</button>
+    <div *ngIf="selectedFilmCharacters.length > 0">
+        <h3>Chracters</h3>
+        <ul>
+            <li *ngFor="let character of selectedFilmCharacters">{{character.name}}</li>
+        </ul>
+    </div>
 </section>

src/app/films/films.component.ts

@@ -11,11 +11,21 @@ import 'rxjs/add/operator/toPromise';
 export class FilmsComponent implements OnInit {
   films;
   selectedFilm;
+  selectedFilmCharacters = [];
 
   constructor(private http: Http) { }
 
   selectFilm(film){
       this.selectedFilm = film;
+      this.selectedFilmCharacters = [];
+  }
+
+  showCharacters(film){
+      film.characters.forEach((characterUrl) => {
+          this.http.get(characterUrl)
+            .toPromise()
+            .then(response => this.selectedFilmCharacters.push(response.json()));
+      });
   }
 
   ngOnInit() {