Completed module

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { HttpModule } from '@angular/http';
 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 {ProductService} from './product.service';
+import { ProductTracklistingComponent } from './product-tracklisting/product-tracklisting.component'
 @NgModule({
  declarations: [
  AppComponent,
  ProductPageComponent,
- ProductDescriptionComponent
+ ProductDescriptionComponent,
+ ProductTracklistingComponent
  ],
  imports: [
  BrowserModule,

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

@@ -4,20 +4,7 @@
  </div>
  <div class="row">
  <div class="col-sm-8">
- <div class="row tracklisting">
- <ul>
- <li>
- <div class="col-sm-5">
- <span class="track-number">1</span>
- <span class="track-name">The Last</span>
- </div>
- <div class="col-sm-3 text-right">
- <span class="track-time">4:48</span>
- <span class="price-and-buy"><button>$0.99</button></span>
- </div>
- </li>
- </ul>
- </div>
+ <app-product-tracklisting></app-product-tracklisting>
  </div>
  </div>
 </main>

src/app/product-tracklisting/product-tracklisting.component.css

@@ -0,0 +1,18 @@
+.tracklisting {
+ font-size: 16px;
+ padding-top: 10px;
+
+}
+
+ul {
+ list-style-type: none;
+}
+
+li {
+ display: block;
+ line-height: 30px;
+}
+
+button {
+ line-height: 1;
+}

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

@@ -0,0 +1,14 @@
+<div class="row tracklisting">
+ <ul>
+ <li *ngFor="let track of albumInfo?.album.tracks">
+ <div class="col-sm-5">
+ <span class="track-number">{{track.trackNumber}}</span>
+ <span class="track-name">{{track.trackName}}</span>
+ </div>
+ <div class="col-sm-3 text-right">
+ <span class="track-time">{{track.trackLength}}</span>
+ <span class="price-and-buy"><button>{{track.trackPrice}}</button></span>
+ </div>
+ </li>
+ </ul>
+</div>

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

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

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

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