CODEWITHSUNDEEP
javascriptionic-framework
estebu
estebu

Reputation: 51

Angular Ionic 4 How to pass a Variable from page.html to page.ts

I try to receive a Variable in my 'detail.page.ts' from my 'list.page.html'

In 'list.page.html' I have a list:

<ion-list>
    <ion-item *ngFor="let item of items" href="details?Reihe={{item.ThemaNr}}">
      <ion-icon name="albums" slot="start" [style.color] ="item.Farbe"></ion-icon>
      {{item.Name}}
      <ion-icon name="list" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

In my 'detail.page.ts' I want to fetch my JSON-Data like this:

loadData() {
    let data:Observable<any>;
    data = this.http.get('https://myURL/mydata.json.php?Reihe= ( and here should be something like: --get."Reihe".from.my.html-page-- to get my ID) ');
    data.subscribe(result => {
      this.details = result;
    })
  }

(Hint: Would be even better if there is a "if(isset($_GET['Reihe']))" before (like in PHP))

How could I manage/implement this ?? Sorry, I'm new in Ionic for 4 days. Big thanx for any ideas!

Regards, Estebu

Ionic:

Ionic CLI : 5.4.15 (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.11.8 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.1.2

Utility:

cordova-res : 0.8.1 native-run : 0.3.0

System:

NodeJS : v13.5.0 (C:\Program Files\nodejs\node.exe) npm : 6.13.4 OS : Windows 10

Upvotes: 2

Views: 1161

Answers (1)

rveerd
rveerd

Reputation: 4006

Ionic 4 uses Angular's router. You can add a parameter to your details page:

{ path: 'details/:reihe', ... }

Access the parameter using ActivatedRoute:

constructor (
  private route: ActivatedRoute
) {
  let reihe = this.route.snapshot.paramMap.get('reihe');
}

Pass the parameter using routerLink:

<ion-item ... [routerLink]="['/details', item.ThemaNr]">

See the Angular documentation for more info.

Upvotes: 1

Related Questions