When i click on that particular item data will show according to it from the json file .how can i modify this .. please help :)

@syedarsalan wrote:

homeservice.ts
code

import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
import { interfacedata } from ‘./interfacedata’;

@Injectable({
providedIn: ‘root’
})

export class HomeService {

data: any;
url="./assets/data/data.json";

constructor(private http:HttpClient) { }

getHomeData():Observable<interfacedata>{
return this.http.get<interfacedata>(this.url);
}
}

pakistan.html
code

Pakistan Team Players

  <ion-item  *ngFor="let p of player" routerLink="{{p.link}}">
    <img src="{{p.img}}" />{{p.name}}
  </ion-item>
  </ion-list>

pakistan.ts
code

import { Component, OnInit } from ‘@angular/core’;
import { HomeService } from ‘src/app/Services/home.service’;

@Component({
selector: ‘app-pakistan’,
templateUrl: ‘./pakistan.page.html’,
styleUrls: [’./pakistan.page.scss’],
})

export class PakistanPage implements OnInit {

player:any=;
constructor(
private homeservice:HomeService
) {}

ngOnInit() {
this.homeservice.getHomeData()
.subscribe((data:any)=>{
this.player = data.pakistan;
});
}
}

baberazam.html
code

{{playername}}

<div class="img-box">

{{d.name}}

Born :{{d.born}}

Age :{{d.age}}

Playing Role :{{d.playingrole}}

Batting Style :{{d.battingstyle}}

Bowling Style :{{d.bowlingstyle}}

ODI Details

ODI Debut :{{d.odidebut}}

Matches :{{d.odimatches}}

Innings :{{d.odiinnings}}

Runs :{{d.odiruns}}

Strike Rate :{{d.odistrikerate}}

Best Score :{{d.odihighest}}

Average:{{d.odiaverage}}

Fities :{{d.odififty}}

Hundereds :{{d.odihundered}}

Fours :{{d.odifours}}

Sixes :{{d.odisixes}}

T20 Details

T20 Debut :{{d.t20debut}}

Matches :{{d.t20matches}}

Innings :{{d.t20innings}}

Runs :{{d.t20runs}}

Strike Rate :{{d.t20strikerate}}

Best Score :{{d.t20highest}}

Average:{{d.t20average}}

Fities :{{d.t20fifty}}

Hundereds :{{d.t20hundered}}

Fours :{{d.t20fours}}

Sixes :{{d.t20sixes}}

Test Details

Test Debut :{{d.testdebut}}

Matches :{{d.testmatches}}

Innings :{{d.testinnings}}

Runs :{{d.testruns}}

Strike Rate :{{d.teststrikerate}}

Best Score :{{d.testhighest}}

Average:{{d.testaverage}}

Fities :{{d.testfifty}}

Hundereds :{{d.testhundered}}

Fours :{{d.testfours}}

Sixes :{{d.testsixes}}

baberazam.ts
code

import { Component, OnInit } from ‘@angular/core’;
import { HomeService } from ‘src/app/Services/home.service’;

@Component({
selector: ‘app-baberazam’,
templateUrl: ‘./baberazam.page.html’,
styleUrls: [’./baberazam.page.scss’],

})

export class BaberazamPage implements OnInit {
playername:any=;
constructor(
private homeservice:HomeService
) {}

ngOnInit() {
this.homeservice.getHomeData()
.subscribe((data:any)=>{
this.playername = data.baberAzam;
});
}
}

Posts: 1

Participants: 1

Read full topic