Initial state

samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.html

@@ -0,0 +1,26 @@
+<div *ng-if="albumData">
+    <h2>{{ albumData.Title }}</h2>
+    
+    <p>
+        <img alt="{{ albumData.Title }}" src="{{ albumData.AlbumArtUrl }}">
+    </p>
+    
+    <div id="album-details">
+        <p>
+            <em>Genre:</em>
+            {{ albumData.Genre.Name }}
+        </p>
+        <p>
+            <em>Artist:</em>
+            {{ albumData.Artist.Name }}
+        </p>
+        <p>
+            <em>Price:</em>
+            {{ albumData.Price | currency:'USD':true }}
+        </p>
+        <p class="button">
+            <!-- TODO: Shopping cart functionality -->
+            Add to cart
+        </p>
+    </div>
+</div>

samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.ts

@@ -0,0 +1,21 @@
+import * as ng from 'angular2/angular2';
+import * as router from 'angular2/router';
+import { Http } from 'angular2/http';
+import * as models from '../../../models/models';
+
+@ng.Component({
+  selector: 'album-details'
+})
+@ng.View({
+  templateUrl: './ng-app/components/public/album-details/album-details.html',
+  directives: [ng.NgIf]
+})
+export class AlbumDetails {
+    public albumData: models.Album;
+    
+    constructor(http: Http, routeParam: router.RouteParams) {
+        http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
+            this.albumData = result.json();
+        });
+    }
+}