load news detail

package-lock.json

         "@fortawesome/free-regular-svg-icons": "^6.2.0",
         "@fortawesome/free-solid-svg-icons": "^6.2.0",
         "@ionic/angular": "^6.1.9",
+        "@ionic/storage-angular": "^3.0.6",
         "ionicons": "^6.0.3",
         "rxjs": "~6.6.0",
         "swiper": "^8.4.4",
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/storage": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-3.0.6.tgz",
+      "integrity": "sha512-sw+zSJINIpbQCGZR9mEtb9N0WmZLuhcMVqOZJBqLuDACAMdXqG39zmp5nSVqhGI1/9X3nd0K5gVn6icyVfUnUg==",
+      "dependencies": {
+        "localforage": "^1.9.0"
+      }
+    },
+    "node_modules/@ionic/storage-angular": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-3.0.6.tgz",
+      "integrity": "sha512-ZXlIFWGU27aCxVFgZb0KFJFtWwnn6+HK6v0rMGzjN8f7oV2ewXaQ2dl1gTw/A8YoozTVPOFxwfFHCjhWLFR1Fw==",
+      "dependencies": {
+        "@ionic/storage": "^3.0.4",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "*",
+        "rxjs": "*"
+      }
+    },
+    "node_modules/@ionic/storage-angular/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@ionic/utils-array": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz",
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immutable": {
       "version": "4.1.0",
         "node": ">= 12.13.0"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
+    "node_modules/localforage/node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
         "tslib": "^2.1.0"
       }
     },
+    "@ionic/storage": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-3.0.6.tgz",
+      "integrity": "sha512-sw+zSJINIpbQCGZR9mEtb9N0WmZLuhcMVqOZJBqLuDACAMdXqG39zmp5nSVqhGI1/9X3nd0K5gVn6icyVfUnUg==",
+      "requires": {
+        "localforage": "^1.9.0"
+      }
+    },
+    "@ionic/storage-angular": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-3.0.6.tgz",
+      "integrity": "sha512-ZXlIFWGU27aCxVFgZb0KFJFtWwnn6+HK6v0rMGzjN8f7oV2ewXaQ2dl1gTw/A8YoozTVPOFxwfFHCjhWLFR1Fw==",
+      "requires": {
+        "@ionic/storage": "^3.0.4",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@ionic/utils-array": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz",
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "immutable": {
       "version": "4.1.0",
       "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==",
       "dev": true
     },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      },
+      "dependencies": {
+        "lie": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+          "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+          "requires": {
+            "immediate": "~3.0.5"
+          }
+        }
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",

package.json

     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@ionic/angular": "^6.1.9",
+    "@ionic/storage-angular": "^3.0.6",
     "ionicons": "^6.0.3",
     "rxjs": "~6.6.0",
     "swiper": "^8.4.4",

src/app/navtabs/navtabs-routing.module.ts

         loadChildren: () => import('../news/news.module').then( m => m.NewsPageModule)
       },   
       {
-        path: 'news-detail',
+        path: 'news-detail/:id',
         loadChildren: () => import('../news-detail/news-detail.module').then( m => m.NewsDetailPageModule)
       },
       {

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

 <ion-header>
-  <ion-toolbar>
-    <ion-title>news-detail</ion-title>
+  <ion-toolbar class="toolbar-bg-color">
+    <ion-buttons slot="end">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <img src="../../../assets/icon/logo-fm99.png" class="head-img">
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-<div style="background-color:#fff; padding: auto;"><p style="color:#000;">News Deatil</p></div>
-</ion-content>
+<ion-content>  
+  <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
+  <h1 style="color:#fff;">++{{ post?.title.rendered }}</h1>
+  <div *ngIf="post">
+    <img [src]="post.media_url" [style.width]="'100%'">
+    <div [innerHTML]="post.content.rendered" padding></div>
+  </div>
+</ion-content>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { WpdataService } from "../services/wpdata.service";
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-news-detail',
 })
 export class NewsDetailPage implements OnInit {
 
-  constructor() { }
+  newsdetaildata: any;
+  data: any;
+
+  constructor(private wpdataService: WpdataService, private route: ActivatedRoute, private router: Router, public modalController: ModalController) { }
+  @Input() id: string;
+  showDiss = false;
+
+  ionViewWillEnter() {
+    if (this.id != undefined) {
+      this.showDiss = true;
+    }
+    console.log("showDiss ", this.showDiss);
+    let id = this.route.snapshot.paramMap.get('id') || this.id;
+    console.log("fetching ...");
+    console.log(id);
+    // this.wpdataService.getNewsDetail(id).subscribe((data) => {
+    // console.log();
+    this.wpdataService.getNewsDetail(id).subscribe(res => {
+      this.data = res;
+      console.log(this.data);
+    });
+  }
+
 
   ngOnInit() {
   }

src/app/news/news.page.html

       <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-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-grid>
+  xxxxx
+  <ion-grid>
+    <ion-card *ngFor="let news of newsdata">
+      <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>
+        </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-grid>
   <ion-grid>
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
-  </ion-grid>  
+  </ion-grid>
 </ion-content>

src/app/news/news.page.ts

 })
 export class NewsPage implements OnInit {
 
-  newsdata: any;
+  // newsdata: any;
   // data: Observable;
+  newsdata: any = [];
 
   constructor(private wpgetdataService: WpdataService) { }
 
   ngOnInit() {
-    this.wpgetdataService.getAllNews().subscribe(data => {
-      // this.jsonService.getSummaryData().subscribe((data) => {      
-      // this.newsdata = data;
-      // console.log('load Static Data');
-      console.log("get News:");
-      console.log(data);
-    });
+
+  }
+
+
+  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(this.newsdata);
+      });
   }
 
 }

src/app/services/wpdata.service.ts

 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Storage } from '@ionic/storage-angular';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WpdataService {
 
-  constructor(private http: HttpClient) { }
+  constructor(private http:HttpClient) { }
 
+  // getAllNews() {
+  //   return this.http.get(
+  //     "../assets/api/news-api.json"      
+  //   );
+  // }
   getAllNews() {
     return this.http.get(
-      "../assets/api/news-api.json"      
+      "https://dev-web-fm99.mcot.net/wp-json/wp/v2/news?_embed"
     );
   }
+
+  getNewsDetail(id) {
+    let url = 'https://dev-web-fm99.mcot.net/'
+    const route = url + 'wp-json/wp/v2/' + 'news/' + id + '?_embed';
+    return this.http.get(route);
+  }
 }