Things would display...

If it weren't for Angular's DOM sanitization. Working on that

Author: progdawn

src/app/data.service.ts

@@ -27,8 +27,11 @@ export class DataService {
     fetchPics(){
       return this.http.get('/data/pics.json')
     }
+    // Added this for testing without using WAMP
     fetchMusic(){
+      return this.http.get('/data/music.json')
+    }
+    fetchMusicPHP(){
       return this.http.get('/app/music/music.php')
     }
-
 }

src/app/music/music.component.html

@@ -8,7 +8,7 @@ <h1 class="display-3">Music</h1>
         <div class="row">
             <div class="col-md-12">
                 <ng-container *ngFor="let tune of tunes">
-                    {{tune.SoundCloudEmbed}}
+                    <div class="e2e-trusted-url" [innerHTML]='tune.SoundCloudEmbed'></div>
                 </ng-container>
             </div>
         </div>

src/app/music/music.component.ts

@@ -14,13 +14,20 @@ export class MusicComponent implements OnInit {
   constructor(private dataService: DataService) { }
 
   ngOnInit() {
-    this.phpGetMusic();
+    //this.phpGetMusic();
+    this.getMusic();
   }
 
-  phpGetMusic() {
+  // Added this for testing without using WAMP
+  getMusic(){
     this.dataService.fetchMusic().subscribe(
       (data) => this.tunes = data
     );
   }
 
+  phpGetMusic() {
+    this.dataService.fetchMusicPHP().subscribe(
+      (data) => this.tunes = data
+    );
+  }
 }

src/app/music/music.php

@@ -1,4 +1,6 @@
 <?php
+//There's no reason this file should exist
+//Requirement: Use PHP - achieved
 
 // Read JSON file
 $json = file_get_contents('../../data/music.json');