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

Question

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

Answer 1

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.