🔨 ✏️ issue #5

songhay/projects/client/src/app/app.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpModule } from '@angular/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app.component';
@@ -13,7 +15,9 @@ import { YtComponent } from './components/yt/yt.component';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
+    HttpModule,
     YouTubeLibModule
   ],
   providers: [],

songhay/projects/client/src/app/components/yt/yt.component.html

@@ -1,3 +1,2 @@
-<p>
-  yt works!
-</p>
+<div *ngIf="youTubeDataService.isLoading">loading thumbs…</div>
+<rx-you-tube-thumbs *ngIf="youTubeDataService.isLoaded" [disableDefaultSort]="false" [thumbsAnimationDuration]="500" [thumbsHeaderLevel]="2" [thumbsTitle]="'songhay tube'" [titleRouterLink]="'/player/video/youtube/uploads/songhay/news'" [youTubeItems]="youTubeItems"></rx-you-tube-thumbs>

songhay/projects/client/src/app/components/yt/yt.component.ts

@@ -1,15 +1,24 @@
 import { Component, OnInit } from '@angular/core';
+import {
+    YouTubeItem,
+    YouTubeDataService
+} from '@songhay/player-video-you-tube';
 
 @Component({
-  selector: 'app-yt',
-  templateUrl: './yt.component.html',
-  styleUrls: ['./yt.component.scss']
+    selector: 'app-yt',
+    templateUrl: './yt.component.html',
+    styleUrls: ['./yt.component.scss']
 })
 export class YtComponent implements OnInit {
+    youTubeItems: YouTubeItem[];
 
-  constructor() { }
+    constructor(public youTubeDataService: YouTubeDataService) {}
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+        this.youTubeDataService.loadChannel('youtube-index-songhay-top-ten');
 
+        this.youTubeDataService.channelLoaded.subscribe(json => {
+            this.youTubeItems = YouTubeDataService.getItems(json);
+        });
+    }
 }