ngif news detail

src/app/navtabs/navtabs.page.html

 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="home" layout="icon-top">
-      <ion-icon name="globe"></ion-icon>
+      <ion-icon name="globe" ></ion-icon>
       <!-- <ion-label>Home</ion-label> -->
     </ion-tab-button>
     <ion-tab-button tab="news" layout="icon-top">
-      <ion-icon name="football"></ion-icon>
+      <ion-icon name="football" ></ion-icon>
       <!-- <ion-label>News</ion-label> -->
     </ion-tab-button>
     <ion-tab-button tab="#" layout="icon-top">
-      <ion-icon name="play-circle" size="large"></ion-icon>
+      <ion-icon name="play-circle" class="icon-big"></ion-icon>
       <!-- <ion-label>Audio</ion-label> -->
     </ion-tab-button>
     <ion-tab-button tab="youtube" layout="icon-top">
-      <ion-icon name="logo-youtube"></ion-icon>
+      <ion-icon name="logo-youtube" ></ion-icon>
       <!-- <ion-label>Youtube</ion-label> -->
     </ion-tab-button>
     <ion-tab-button tab="#" layout="icon-top">
-      <ion-icon name="videocam"></ion-icon>
+      <ion-icon name="videocam" ></ion-icon>
       <!-- <ion-label>Video</ion-label> -->
     </ion-tab-button>
   </ion-tab-bar>

src/app/navtabs/navtabs.page.scss

 //     position: unset!important;
 //     contain: size style!important;
 //   }
-  
+
 //   .bottom-tab-bar {
 //     --background: transparent;
 //     --border: 0;
 //   }
-  
+
 //   ion-tab-button {
 //     --background: #134d80;
 //     --color:white;
 //     --color-selected: red;
 //     --ripple-color: white;
 //   }
-  
+
 
 // .button-center {
 //     --background: transparent!important;
 //       content: '';
 //     }
 //   }
-  
+
 // .inner-left-btn {
 //     border-radius: 0 50% 0 0; 
 //     //create the curved style on the left side of the center
 //     border-radius: 50% 0 0 0; 
 //     // create the curved style on the right side of the center
 // }
-  
+
 // .inner-center-btn {
 //     position: absolute;
 //     left: calc(50% - 35px); // position your button in the center
 //     border-radius: 16px;
 //     width: 92%;
 //     margin: 0 auto;
-    
+
 //   }
 
-  ion-tab-button {
-    --color: var(--ion-color-medium);
-    --color-selected: var(--ion-color-primary);
-    --background-focused:#ff600d;
-    --background-focused-opacity:0.5;
-  
-    &::before {
-      background-color: transparent;
-      display: block;
-      content: "";
-      margin: 0 auto;
-      width: 20px;
-      height: 2px;
-    }
-  
-    &.tab-selected::before {
-      background-color: var(--ion-color-primary);
-    }
-  } 
-
-  // ion-tab-button.tab-selected {
-  //   --background: var(--ion-color-dark) !important;
-  //   --color-selected: var(--ion-color-light);
-  // }
+ion-tab-button {
+  --color: var(--ion-color-medium);
+  --color-selected: var(--ion-color-primary);
+  --background-focused: #ff600d;
+  --background-focused-opacity: 0.5;
+
+  &::before {
+    background-color: transparent;
+    display: block;
+    content: "";
+    margin: 0 auto;
+    width: 20px;
+    height: 2px;
+  }
+
+  &.tab-selected::before {
+    background-color: var(--ion-color-primary);
+  }
+}
+
+.icon-big {
+  font-size: 90px;
+  display: block;
+  color: rgb(255, 106, 0);
+  // margin-bottom: 10px;
+}
+
+
+
+// ion-tab-button.tab-selected {
+//   --background: var(--ion-color-dark) !important;
+//   --color-selected: var(--ion-color-light);
+// }

src/app/news-detail/news-detail.page.html

   </ion-grid>
   <div *ngIf="data">
     <img [src]="data.better_featured_image.source_url" [style.width]="'100%'" />
-    <ion-grid >
+    <ion-grid>
       <ion-row>
         <ion-col class="bg-color-1">
           <h2 [innerHTML]="data?.title.rendered" class="title-txt-1"></h2>
           <div [innerHTML]="data.content.rendered" class="content-txt-1"></div>
+          <div *ngIf="data.acf.youtube_url_for_app" class="">
+            <a href="{{data.acf.youtube_url_for_app}}" targrt="_blank">รับชมคลิปผ่าน youtube</a>
+          </div>
         </ion-col>
       </ion-row>
     </ion-grid>

src/app/services/wpdata.service.ts

 
   getAllYoutube() {
     return this.http.get(
-      // "../assets/api/youtube-data.json"
-      "https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCfZdHbI3pIN4uselPFzzbOg&maxResults=5&order=date&key=AIzaSyDsRrS_dUxT_3PFaMZIBBdrbl37p_fqrNY"
+       "../assets/api/youtube-data.json"
+     // "https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCfZdHbI3pIN4uselPFzzbOg&maxResults=5&order=date&key=AIzaSyDsRrS_dUxT_3PFaMZIBBdrbl37p_fqrNY"
     );
   }
 }