load youtube api in page

src/app/news/news.page.ts

@@ -10,8 +10,6 @@ import { map } from 'rxjs/operators';
 })
 export class NewsPage implements OnInit {
 
-  // newsdata: any;
-  // data: Observable;
   newsdata: any = [];
 
   constructor(private wpgetdataService: WpdataService) { }
@@ -22,13 +20,9 @@ export class NewsPage implements OnInit {
 
 
   ionViewWillEnter() {
-    // this.wpgetdataService.getAllNews().subscribe((data => {
-    //   console.log("get News:");
-    //   console.log(data);
-    //   this.newsdata = JSON.parse(data.data);
     this.wpgetdataService.getAllNews().subscribe((data) => {
       this.newsdata = data;
-      console.log('load Lineup Data');
+      console.log('load News Data');
       console.log(this.newsdata);
       });
   }

src/app/youtube/youtube.page.html

@@ -9,7 +9,6 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
   <ion-grid>
     <ion-row>
       <ion-col>
@@ -17,50 +16,28 @@
         <hr>
       </ion-col>
     </ion-row>
+  </ion-grid>
+  <ion-grid>
     <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-1.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">Morning Talk [26-10-2022 l 07:30 - 09:00 น. ]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-2.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-3.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-2.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-3.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-2.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/mqdefault-3.jpg">
+      <ion-col class="ion-no-padding">
+        <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
       </ion-col>
-      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
     </ion-row>
   </ion-grid>
   <ion-grid>
+    <div *ngIf="ytdata">
+    <ion-card *ngFor="let yt of ytdata['items']" class="list-card-margin">
+      <img [src]="yt.snippet.thumbnails.high.url" [style.width]="'100%'" />
+      <ion-card-header>
+        <a [routerLink]="['' , ]">
+          <ion-card-title class="title-txt-1" [innerHTML]="yt.snippet.title"></ion-card-title>
+        </a>
+      </ion-card-header>
+      <ion-card-content text-justify [innerHTML]="yt.snippet.description" class="content-txt-1"></ion-card-content>
+    </ion-card>
+    </div>
+  </ion-grid>
+  <ion-grid>
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
   </ion-grid>
 </ion-content>

src/app/youtube/youtube.page.scss

@@ -1,3 +1,29 @@
 ion-row {
     background-color: #fcfcfc !important;
+}
+
+.list-card-margin {
+    margin: 0 0 10px 0;
+}
+
+ion-card-header {
+    padding: 5px 10px;
+}
+
+.title-txt-1 {
+    font-family: Prompt Reg !important;
+    font-size: 1.3em;
+    line-height: 1.3em;
+    color: darkorange;
+}
+
+ion-card-content {
+    padding: 0px 10px 10px;
+}
+
+.content-txt-1 {
+    font-family: K2D !important;
+    font-size: 1em;
+    line-height: 1.3em;
+    color: darkslategray;
 }

src/app/youtube/youtube.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { WpdataService } from '../services/wpdata.service';
 
 @Component({
   selector: 'app-youtube',
@@ -7,9 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class YoutubePage implements OnInit {
 
-  constructor() { }
+  ytdata: any;
+
+  constructor(private wpgetdataService: WpdataService) { }
 
   ngOnInit() {
   }
 
+  ionViewWillEnter() {
+    this.wpgetdataService.getAllYoutube().subscribe((data) => {
+      this.ytdata = data;
+      console.log('load Youtube Data');
+      console.log(this.ytdata);
+    });
+  }
 }