Dynamically add items to Ionic 2 side menu

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?

[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