fm99-app-rev/src/app/home/home.page.html

<ion-header>
  <ion-toolbar class="toolbar-bg-color">
    <img src="../../../assets/icon/fm99-logo-2021-3.svg" class="head-img">
    <ion-buttons slot="end">
      <ion-menu-button>
        <ion-icon src="../assets/icon/menu-svgrepo-com.svg" color="warning"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <swiper #swiper [config]="config">
    <ng-template swiperSlide><img src="../../../assets/img-static/fb-Ad-1.jpeg" alt=""></ng-template>
    <ng-template swiperSlide><img src="../../../assets/img-static/fb-Ad-2.jpeg" alt=""></ng-template>
    <ng-template swiperSlide><img src="../../../assets/img-static/fb-Ad-3.jpeg" alt=""></ng-template>
  </swiper>
  <ion-grid class="ion-padding-vertical">
    <ion-row>
      <ion-col size="8" class="bg-color-2">
      </ion-col>
      <ion-col size="4">
      </ion-col>
    </ion-row>
    <ion-row class="bg-color-1">
      <ion-col>
        <h2 class="color-3">ข่าวกีฬา</h2>
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let news of newsdata | slice:0:4" class="bg-color-1 last-child-pad-bottom">
      <ion-col size="5">
        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" />
      </ion-col>
      <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail' , news.id]"><span
            [innerHTML]="news.title.rendered"></span></a>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="4">
      </ion-col>
      <ion-col size="8" class="bg-color-3">
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid>
    <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
  </ion-grid>

  <ion-grid class="ion-padding-vertical">
    <ion-row>
      <ion-col size="8" class="bg-color-2">
      </ion-col>
      <ion-col size="4">
      </ion-col>
    </ion-row>
    <ion-row class="bg-color-1">
      <ion-col>
        <h2 class="color-3">รายการย้อนหลัง</h2>
      </ion-col>
    </ion-row>
    <div *ngIf="ytalldata">
      <ion-row *ngFor="let ytdata of ytalldata['items']| slice:0:4" class="bg-color-1">
        <ion-col size="5">
          <img [src]="ytdata.snippet.thumbnails.high.url" [style.width]="'100%'" />
        </ion-col>
        <ion-col class="ion-align-self-center"><a href="https://www.youtube.com/watch?v={{ytdata.id.videoId}}"><span
              [innerHTML]="ytdata.snippet.title"></span></a></ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="4">
        </ion-col>
        <ion-col size="8" class="bg-color-3">
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
  <ion-grid>
    <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
  </ion-grid>

</ion-content>