CODEWITHSUNDEEP
angularionic5
Rui Delgado
Rui Delgado

Reputation: 1

IONIC 5 - Side menu items link to specific page

I've been struggling with Ionic 5 side menu...I've created a new app using the side menu template. I can run the app on the browser and android studio by choosing "Run 'app'". So far so good!

I've added some pages to a folder called "pages". On app.component.ts I've added has many entries has I added pages but...

  1. If I do not change the URL format and keep the "/folder/#name of page#" I always the UI Components generic page for any given page. Menu icon is shown.
  2. If I change URL to /pages/#name of page# I get the custom content for that given page (that exists on the correspondent html file) but the menu icon is not shown.

I can I get the menu items to point to the respective custom pages and still get the menu icon on the top left. I've trace this problem to the app.component.ts but not sure on what is wrong.

Can anyone help me?

(i'm using angular)

Upvotes: 0

Views: 1182

Answers (1)

Vishal Srivastava
Vishal Srivastava

Reputation: 350

You can use angular routing or ionic navigation and specify the URL of the page on click event from side menu items.

public appPages = [
    { title: 'Inbox', url: '/folder/Inbox', icon: 'mail' },
    { title: 'Outbox', url: '/folder/Outbox', icon: 'paper-plane' },
    { title: 'Favorites', url: '/folder/Favorites', icon: 'heart' },
    { title: 'Archived', url: '/folder/Archived', icon: 'archive' },
    { title: 'Trash', url: '/folder/Trash', icon: 'trash' },
    { title: 'Spam', url: '/folder/Spam', icon: 'warning' },
  ];

and then on html of side menu:

<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
              <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>

Here the [routerLink] helps binds to the value or URL specified in an array and when clicked it navigates to that URL.

Upvotes: 1

Related Questions