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

If you are showing the details in list.page.html, it is better you write the get code in list.ts. — Rahul Pamnani
– Rahul Pamnani, Commented Jan 17, 2020 at 12:37

rveerd · Accepted Answer · 2020-01-17 13:19:31Z

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.

answered Jan 17, 2020 at 13:19

rveerd

4,0661 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

estebu Over a year ago

Thanx for Your help! But this is a little less information for me. -- Where (in which different pages) exactly did I have to insert Your code? -- What means the '...' in { path: 'details/:reihe', ... } what should I write there? -- I want to receive the get-parameter into the details.page.ts cause I need it to do the JSON request . Thatswhy I can't pass the parameter (using routerLink) NOT in an <ion-item> -- or am I fail at all??

estebu Over a year ago

I need the parameter from list.page.html to -> details.page.ts

rveerd Over a year ago

See this sample based on the "sidemenu" starter template. Check out app-routing.module.ts and the list and detail pages. But you should really read some guides or documentation.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related