diff --git a/src/app/app.component.html b/src/app/app.component.html
index 823b30a..2beea87 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,7 +5,7 @@
 
   <div class="container">
     <div class="row" >
-      <app-license-plate *ngFor="let plate of licensePlates" appHighlight
+      <app-license-plate *ngFor="let plate of licensePlates | async" appHighlight
                      [plate]="plate" buttonText="Add to cart" class="col-md-4">
 
       </app-license-plate>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index fb1677e..6304884 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import {LicensePlate} from './license-plate';
 import {LicensePlateService} from './license-plate.service';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -8,11 +9,9 @@ import {LicensePlateService} from './license-plate.service';
 })
 export class AppComponent {
 
-  licensePlates: LicensePlate[];
+  licensePlates: Observable<LicensePlate[]>;
 
   constructor(private service: LicensePlateService) {
-      this.service.getList().subscribe( (data) => {
-        this.licensePlates = data;
-      });
+      this.licensePlates = this.service.getList();
   }
 }