How to append dynamic ID to route url for Manu Bar

This is my app.component.html code:

<ion-split-pane contentId="main-content">

  <ion-menu contentId="main-content" type="overlay">

    <ion-content>

      <ion-list id="inbox-list">
        <ion-list-header>Menu Content</ion-list-header>
        <ion-note></ion-note>

        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
          <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none"
            detail="false" [class.selected]="selectedIndex == i">
            <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
            <ion-label>{{ p.title }}</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>

      <!-- <ion-list id="labels-list">
        <ion-list-header>Labels</ion-list-header>

        <ion-item *ngFor="let label of labels" lines="none">
          <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
          <ion-label>{{ label }}</ion-label>
        </ion-item>
      </ion-list> -->

    </ion-content>

  </ion-menu>

  <ion-router-outlet id="main-content"></ion-router-outlet>

</ion-split-pane>

This my app.component.ts code

import { Component } from ‘@angular/core’;
import { ActivatedRoute, NavigationExtras, Router } from ‘@angular/router’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { Platform } from ‘@ionic/angular’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’],
})
export class AppComponent {

ID: any;
currentPageTitle = ‘Dashboard’;

appPages = [
{
title: ‘Dashboard’,
url: ‘/dashboard’,
icon: ‘easel’
},
{
title: ‘Profile’,
url: ‘/profile’,
// url: this.router.navigate([‘/profile’]),
icon: ‘person’,
},
{
title: ‘log out’,
url: ‘/login’,
icon: ‘power’
}
];

constructor(private platform : Platform,private splashScreen: SplashScreen,private statusBar: StatusBar,
private route: ActivatedRoute,private router:Router) {
this.initializeApp();

this.route.queryParams.subscribe(params => {
  console.log("params Dashboard:::::::" + JSON.stringify(params));

  if (params["ID"] !== undefined ) {

    this.ID = params["ID"];
    console.log(" id Dashboard:::::::" + this.ID ) ;

  }
  else{
    console.log("else");
  }
});

}

async initializeApp(): Promise {
await this.platform.ready();

this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
});

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

}

profile(){
let navigationExtras: NavigationExtras = {
queryParams: {
‘ID’ : this.ID,
}
};
// this.router.navigate([‘/professional-details’],navigationExtras);
this.router.navigate([‘/profile’],navigationExtras);
// this.router.navigateByUrl(‘/profile’);
}

}

1 post - 1 participant

Read full topic