Added API call

.REMEMBER

@@ -1,4 +1,6 @@
-$ ionic generate 
+THIS IS THE IONIC PROJECT 
+
+ ionic generate 
 $ ionic generate page
 $ ionic generate page contact
 $ ionic generate component contact/form

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

package.json

@@ -36,7 +36,7 @@
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/cli": "^15.0.0",
+    "@angular/cli": "15.1.2",
     "@angular/compiler": "^15.0.0",
     "@angular/compiler-cli": "^15.0.0",
     "@angular/language-service": "^15.0.0",

src/app/app.module.ts

@@ -7,9 +7,12 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { HttpClientModule } from '@angular/common/http';
+
+
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

src/app/services/apicore.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApicoreService } from './apicore.service';
+
+describe('ApicoreService', () => {
+  let service: ApicoreService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApicoreService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/apicore.service.ts

@@ -0,0 +1,31 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+export interface ApiResult {
+  page: number;
+  results: any[];
+  total_pages: number;
+  total_results: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApicoreService {
+
+  constructor(private http: HttpClient) {}
+
+  getTopRatedBlogs(page = 1): Observable<ApiResult> {
+    return this.http.get<ApiResult>(
+      `${environment.baseUrl}/blogdata?page=${page}&api_key=${environment.apiKey}`
+    );
+  }
+
+  getMovieDetails(id: string): Observable<any> {
+    return this.http.get<ApiResult>(
+      `${environment.baseUrl}/movie/${id}?api_key=${environment.apiKey}`
+    );
+  }
+}

src/app/user-login/user-login.page.html

@@ -20,17 +20,14 @@
           <ion-input type="password" required></ion-input>
         </ion-item>
         <ion-item lines="full">
-          <ion-button type="submit" color="danger" size="small" (click)="completeLogin()" >Sign In</ion-button
+          <ion-button type="submit" color="danger" size="small" (click)="completeLogin()">Sign In</ion-button>
-          >
         </ion-item>
         <ion-row>
           <ion-col>
-            <a [routerLink]="['/forgot-password']" class="small-text"
+            <a [routerLink]="['/forgot-password']" class="small-text">Forgot Password?</a>
-              >Forgot Password?</a
-            >
           </ion-col>
         </ion-row>
       </ion-card-content>
     </ion-card>
   </form>
-</ion-content>
+</ion-content>

src/app/userpage/user-dash/user-dash.page.html

@@ -37,4 +37,15 @@
   </ion-grid>
   </div>
 
+  <ion-card *ngFor="let item of blogData">
+    <img alt={{item.post_title}} src={{item.meta_value}} />
+    <ion-card-header>
+      <ion-card-subtitle>{{item.post_title}}</ion-card-subtitle>
+    </ion-card-header>
+  
+    <ion-card-content>
+     THis is some contatnts to show for noe 
+    </ion-card-content>
+  </ion-card>
+
 </ion-content>

src/app/userpage/user-dash/user-dash.page.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { InfiniteScrollCustomEvent, LoadingController } from '@ionic/angular';
+import { ApicoreService } from 'src/app/services/apicore.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-user-dash',
@@ -6,22 +9,62 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./user-dash.page.scss'],
 })
 export class UserDashPage implements OnInit {
-  what_is_below:string='';
+  what_is_below: string = '';
-  constructor() { }
+  blogData:any;
+  currentPage = 1;
+
+  constructor(
+    private apicoreService: ApicoreService,
+    private loadingCtrl: LoadingController
+  ) {}
   slides_items = [
-    {menu_key: "thisleadto", name: "This Menu 11", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 11', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 22", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 22', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 33", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 33', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 44", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 44', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 55", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 55', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 66", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 66', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 77", extra: "c"},
+    { menu_key: 'thisleadto', name: 'This Menu 77', extra: 'c' },
-    {menu_key: "thisleadto", name: "This Menu 88", extra: "c"}
+    { menu_key: 'thisleadto', name: 'This Menu 88', extra: 'c' },
-    ]
+  ];
   ngOnInit() {
+    this.loadBlogData();
   }
-  selectedMenu(menuData:any){
+  selectedMenu(menuData: any) {
     alert(menuData.name);
-   this.what_is_below=menuData.name;
+
+    this.what_is_below = menuData.name;
+  }
+
+  async loadBlogData(event?: InfiniteScrollCustomEvent) {
+    const loading = await this.loadingCtrl.create({
+      message: 'Loading..',
+      spinner: 'bubbles',
+    });
+    await loading.present();
+
+    this.apicoreService.getTopRatedBlogs(this.currentPage).subscribe(
+      (res) => {
+        loading.dismiss();
+        this.blogData=res;
+        console.log(res);
+       // debugger;
+        //this.movies.push(...res.results);
+
+        event?.target.complete();
+        if (event) {
+          event.target.disabled = res.total_pages === this.currentPage;
+        }
+      },
+      (err) => {
+        console.log(err);
+        loading.dismiss();
+      }
+    );
+  }
+
+  loadMore(event: InfiniteScrollCustomEvent) {
+    this.currentPage++;
+    this.loadBlogData(event);
   }
 }

src/environments/environment.ts

@@ -3,7 +3,10 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiKey: '', // <-- Enter your own key here!'
+  baseUrl: 'https://devapi.mermsemr.com/en/mobile/api/v2/myfit',
+  images: 'http://image.tmdb.org/t/p',
 };
 
 /*