home load news

src/app/home/home.page.html

         <hr>
       </ion-col>
     </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail/']">“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</a></ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
+    <ion-row *ngFor="let news of newsdata | slice:0:4">
+      <ion-col size="5">        
+        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" /> 
       </ion-col>
-      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
+      <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail' , news.id]"><span
+[innerHTML]="news.title.rendered"></span>
+        </a>
       </ion-col>
-      <ion-col class="ion-align-self-center">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
     </ion-row>
   </ion-grid>
 
       <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" >
+      <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>

src/app/home/home.page.scss

 }
 
 ion-content {
-  font-family: Prompt Reg !important;
+  font-family: Prompt !important;
   font-size: 1em;
   line-height: 1.3em;
 }
 
 ion-row {
   background-color: #fcfcfc !important;
-}
+}

src/app/home/home.page.ts

 import {SwiperComponent} from 'swiper/angular';
 import { SwiperOptions } from 'swiper';
 import SwiperCore, { Pagination,Autoplay,Navigation,Keyboard } from 'swiper';
+import { WpdataService} from '../services/wpdata.service';
 
 SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
 @Component({
   encapsulation: ViewEncapsulation.None
 })
 export class HomePage implements AfterContentChecked {
+
+  newsdata: any = [];
   
   @ViewChild('swiper') swiper: SwiperComponent;
 
     navigation: true,
   }
 
-  constructor() {}
+  constructor( private wpgetdataService : WpdataService) {}
 
   ngAfterContentChecked() {
     if (this.swiper) {
     }    
   }
 
+  ionViewWillEnter() {
+    this.wpgetdataService.getAllNews().subscribe((data) => {
+      this.newsdata = data;
+      console.log('load Lineup Data');
+      console.log(this.newsdata);
+      });
+  }
+
 }

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

   </ion-toolbar>
 </ion-header>
 
-<ion-content>  
-  <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
-  <h1 style="color:#fff;">++{{ data?.title.rendered }}</h1>
-  <div *ngIf="data">
-    <img [src]="data.media_url" [style.width]="'100%'">
-    <div [innerHTML]="data.content.rendered" padding></div>
-  </div>
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col class="ion-no-padding">
+        <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <ion-grid>
+    <ion-row>
+      <ion-col *ngIf="data">
+        <div [innerHTML]="data?.title.rendered" class="title-txt-1"></div>        
+          <img [src]="data.better_featured_image.source_url" [style.width]="'100%'" />          
+          <div [innerHTML]="data.content.rendered"></div>      
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <ion-grid>
+    <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
+  </ion-grid>
 </ion-content>

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

+ion-row {
+    background-color: #fcfcfc !important;
+}

src/app/news/news.page.html

 </ion-header>
 
 <ion-content>
-  <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
   <ion-grid>
     <ion-row>
       <ion-col>
         <h2>ข่าวกีฬา</h2>
-        <hr>
       </ion-col>
     </ion-row>
+  </ion-grid>
+  <ion-grid>
     <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail/']">“น้องเทนนิส”
-          หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</a></ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
-      </ion-col>
-      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="5">
-        <img src="../../assets/img-static/SEI129887404-c4a9.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">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
     </ion-row>
   </ion-grid>
-  xxxxx
   <ion-grid>
-    <ion-card *ngFor="let news of newsdata">
+    <ion-card *ngFor="let news of newsdata" class="list-card-margin">
       <img src="{{news.better_featured_image.source_url}}" />
       <ion-card-header>
-        <!-- <ion-card-subtitle>Destination</ion-card-subtitle> -->
-        <!-- <ion-card-title class="title-txt"><a [routerLink]="['/tabs/news-single']">{{news.title.rendered}}</a></ion-card-title> -->
         <a [routerLink]="['../news-detail' , news.id]">
-          <ion-card-title class="title-txt" [innerHTML]="news.title.rendered"></ion-card-title>
+          <ion-card-title class="title-txt-1" [innerHTML]="news.title.rendered"></ion-card-title>
         </a>
       </ion-card-header>
-      <ion-card-content text-justify [innerHTML]="news.excerpt.rendered" class="content-txt"></ion-card-content>
-      <ion-item>
-        <ion-icon name="time-outline"></ion-icon>
-        <ion-label class="txt-date pl-5">{{news.date | date }}</ion-label>
-      </ion-item>
-    </ion-card>    
+      <ion-card-content text-justify [innerHTML]="news.excerpt.rendered" class="content-txt-1"></ion-card-content>
+    </ion-card>
   </ion-grid>
   <ion-grid>
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">

src/app/news/news.page.scss

 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/global.scss

 
 
 ion-content {
-  --ion-background-color: #111D12;
+  // --ion-background-color: #111D12;
+  --background: url('./assets/img-static/bg-content-min.jpg') no-repeat 
+center/cover;
 }
 
 
 // }
 
 .toolbar-bg-color {
-  --background: url('./assets/img-static/background_982645-1-min.png') no-repeat top right / cover;
+  --background: url('./assets/img-static/background_982645-1-min.png') no-repeat top left / cover;
   // --background: rgb(25, 42, 113);
   // --background: linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
   // --background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
 hr {
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+a {
+  text-decoration: none;
 }