CODEWITHSUNDEEP
angularionic4
John Arc
John Arc

Reputation: 183

How do I change the content of my side menu after clicking a button in a ionic 4 mobile application?

I am trying to change the contents of my side menu after clicking a button in my ionic 4 mobile application. Currently, the menu contents stay the same throughout all my pages. Here are my codes in my app-component.html:

  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

How do I make it so that upon clicking a button, the content of my side menu will change? For example, currently, my side menu shows 'Home' and 'List' that leads to the respective pages. After clicking a button, I want it to change from 'Home' + 'List' to 'Bookings' + 'Profile'.

PS: I'm started learning Ionic 4 and angular last week so I am considered a beginner, so a link or some sort of step-by-step demonstration would be much appreciated.

Upvotes: 2

Views: 1612

Answers (1)

Chund
Chund

Reputation: 459

Then all you want to do is to change what is referenced by your appPages. Lets say your component/page that you route to knows its suppages. In that case all you would need is to let your nav-component know which pages those are.

This communication could for example be handled by a PagesToNavigateService which would be needed in all your accesable component. This could look like:

class PagesToNavigateService{
  pages$: BehaviourSubject<{url: string, icon: string, title: string}[]> =
    new BehaviourSubject([
      {url:'/home', icon:'yourHomeIcon', title: 'Home'},
      {url:'/list', icon:'yourListIcon', title: 'List'}
    ]);
}

After that you could inject that Service and subscribe to pages$ in your NavComponent 

constructor ( private pagesToNavigateService PagesToNavigateService) {}
this.appPages$ = this.pagesToNavigateService.pages$;

and

<ion-list *ngIf="appPages$ | async as appPages> <---- Here happens some "magic"
  <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
    <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
      <ion-icon slot="start" [name]="p.icon"></ion-icon>
      <ion-label>
        {{p.title}}
      </ion-label>
    </ion-item>
  </ion-menu-toggle>
</ion-list>

Now you would only need your routed to components to update these routes, like the following for example:

class OtherComponent implements OnInit{
  mySupPages= [{url:'/someURL', icon:'someIcon'}];
  constructor(private pagesToNavigateService PagesToNavigateService){}
  ngOnInit() {
    this.pagesToNavigateService.pages$.next(this.mySupPages);
  }
}

This should update your navigation upon loading of you OtherComponent, unless Ionic specific things to not work that way, I haven't handled ionic that much yet.

Upvotes: 1

Related Questions