Completed module

src/app/app.component.html

@@ -1 +1 @@
-<app-product-page></app-product-page>
+<app-product-list></app-product-list>

src/app/app.module.ts

@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { ProductPageComponent } from './product-page/product-page.component';
 import { ProductDescriptionComponent } from './product-description/product-description.component';
 import {ProductService} from './product.service';
-import { ProductTracklistingComponent } from './product-tracklisting/product-tracklisting.component'
+import { ProductTracklistingComponent } from './product-tracklisting/product-tracklisting.component';
+import { ProductListComponent } from './product-list/product-list.component'
 @NgModule({
  declarations: [
  AppComponent,
  ProductPageComponent,
  ProductDescriptionComponent,
- ProductTracklistingComponent
+ ProductTracklistingComponent,
+ ProductListComponent
  ],
  imports: [
  BrowserModule,

src/app/product-list/product-list.component.html

@@ -0,0 +1,5 @@
+ <ul>
+ <li *ngFor = "{let product of products}">
+ {{product.albumName}}
+ </li>
+ </ul>

src/app/product-list/product-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+ let component: ProductListComponent;
+ let fixture: ComponentFixture<ProductListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ProductListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProductListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/product-list/product-list.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { Product } from '../product'
+import {ProductService} from '../product.service'
+@Component({
+ selector: 'app-product-list',
+ templateUrl: './product-list.component.html',
+ styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent implements OnInit {
+products: Product[];
+ constructor(private _productService: ProductService) { }
+
+ ngOnInit() {
+ this._productService.getProducts().subscribe(response => this.products = response)
+ }
+
+}

src/app/product.service.ts

@@ -3,18 +3,22 @@ import {Http, Response } from '@angular/http'
 import 'rxjs/add/operator/map'
 import { Album } from './album'
 import { Observable } from 'rxjs/Observable'
-
+import {Product} from './product'
 
 @Injectable()
 export class ProductService {
 
 private _albumUrl = '../assets/album.json';
-
+private _productsUrl = "../assets/products.json";
 
  constructor(private _http: Http) { }
 
  getAlbum(id: number): Observable<Album> {
  return this._http.get(this._albumUrl).map((response) => <Album>response.json());
  }
 
+
+ getProducts(): Observable<Product[]> {
+ return this._http.get(this._productsUrl).map(response => <Product[]>response.json())
+ }
 }

src/app/product.ts

@@ -0,0 +1,5 @@
+export interface Product {
+ id: number;
+ artistName: string;
+ albumName: string;
+}