Ionic-framework: Dynamically add items to Ionic 2 side menu

[Tusharbalar]

I am using latest version of ionic 2.

Ionic version: 2.1.8

I want to add item dynamically in a sidebar.

app.component.ts;

export class MyApp {

  pages: Array<{title: string, component: any, icon: any }>;

  this.pages = [
  { title: 'Dashboard', component: DashboardComponent, icon: 'ios-home-outline' },
  { title: 'Complaints', component: ComplaintPage, icon: 'ios-sad-outline' },
  { title: 'Suggestions', component: SuggestionPage, icon: 'md-bulb' },
  { title: 'Appreciations', component: AppreciationPage, icon: 'ios-thumbs-up-outline' },
  { title: 'Poll', component: PollPage, icon: 'ios-stats-outline' },
  { title: 'Survey', component: SurveyPage, icon: 'ios-analytics-outline' },
  { title: 'ReportIssue', component: ReportIssuePage, icon: 'ios-bug-outline' },
  ];

}

app.html

<ion-content> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> <ion-icon item-left [name]="p.icon"></ion-icon> {{p.title}} </button> </ion-list> </ion-content>
I want to show complaint item if complaint status is 'NEW'.

So, Is it possible to showing complaint item for some specific condition? I tried with ngIf but its do not work.

what is the best way to implement this kind of features?

[rapropos]

Why don't you try asking in the support forum?

[jgw96]

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

[mainakanyi]

Hi Tusharbalar, how did you get this solved. Kind Regards

[Tusharbalar]

Hello @mainakanyi,
I have implemented the same thing, and it's working correctly in my app

.ts file

export class MyApp {

  public status: boolean = false;
  @ViewChild(Nav) nav: Nav;
  constructor(public platform: Platform) {}

  initializeApp() {
    this.platform.ready().then(() => {
      this.networkService.checkNetworkStatus();
      StatusBar.styleDefault();
      Splashscreen.hide();
      this.getStatus();
      if (this.platform.is('ios')) {
        Keyboard.disableScroll(true);
      }
    });
  }

  getStatus(condition here) {
    if (your logic here) {
      this.status = true;
    } else {
      this.status = false;
    }
  }

}

HTML file

<ion-content>
  <ion-list>
    <button *ngFor="let p of pages"  *ngIf="status" menuClose ion-item (click)="openPage(p)">
      <ion-icon item-left [name]="p.icon"></ion-icon>
      {{p.title}}
    </button>
  </ion-list>
</ion-content>

let me know if you are not able to do this thing, i will provide more code

[mainakanyi]

Working as well. Thanks

[bhumin3i]

how do i append pages from another page.
means :+1:
app.component.ts;
page content navmenu variables like pages,
but from another page i would like to append value in this.pages

from login.ts append below objects in existing variable which is available in app.component.ts
how do i bind and sync
this.pages = [
{ title: 'Log out', component: logOut, icon: 'logout' },
{ title: 'abc', component: xyz, icon: 'ios-ls' },
];

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.