Hide someone itens in Menu left

Ionic Framework ionic-v3
1

Hi guys, I need to hide some items in menu

app.html:

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" [class.activeHighLight]="checkActive(p)" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

app.components,ts :

this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Meu Perfil', component: UserProfile },
      { title: 'Sair', component: Login }
    ];
    this.activePage = this.pages[0];

I wanted for exammple:

user = 1;
user = 2;

this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Meu Perfil', component: UserProfile },
      { title: 'Confidential Menu', component: Confidential, hidden user 2 }, ---->      hidden to user = 2;  
      { title: 'Sair', component: Login }
    ];
    this.activePage = this.pages[0];
2

I can think of a couple of options: either an *ngIf in the template that checks that “confidential” flag, or actually taking it out of / putting it back in the array when the user changes.

3

So I trying hide some item of menu
I criated

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

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public app: App) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: Home, profile: 3  },
      { title: 'Meu Perfil', component: Home, profile: 3  },
      { title: 'Advogados', component: ListLawyers, profile: 3 },
      { title: 'Legislação', component: Legislation, profile: 2 },
      { title: 'Sair', component: null, perfil: '' }
    ];
    this.activePage = this.pages[0];
  }

in my view

<ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" [class.activeHighLight]="checkActive(p)" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

I would like if profile user logged is 3, then hidden legislation menu help me ?

4

I found a way to do this, but I have another problem look:
Initially I begin my menu so:

constructor(public events: Events, public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public app: App, public alertCtrl: AlertController, private service: Auth) {
    this.initializeApp();
    this.menu();
    this.showHiddenMenu(); // tem que ficar abaixo se não fica indefinido em quantidade o menu

    events.subscribe('user:authenticated', (isLoggedIn, profile)=> {
      this.isLoggedIn = isLoggedIn;
      this.profile = profile;
      console.log(this.profile.profile_id);
    })
  
  }
  }

menu() {
      this.pages = [
        { title: 'Home', component: Home, profile: 1, hidden: this.esconde },
        { title: 'Meu Perfil', component: Home, profile: 1, hidden: this.esconde },
        { title: 'Minha Causa', component: ListCauses, profile: 3, hidden: this.esconde },
        { title: 'Causas Cidadãs', component: ListCausesCitizens, profile: 2, hidden: this.esconde },
        { title: 'Advogados', component: ListLawyers, profile: 3, hidden: this.esconde },
        { title: 'Legislação', component: Legislation, profile: 1, hidden: this.esconde },
        { title: 'Ajuda', component: Help, profile: 1, hidden: this.esconde },
        { title: 'Sair', component: null, profile: '', hidden: this.esconde }
      ];
      this.activePage = this.pages[0];
  }

the following step, I created a methodo for hide or show menu

showHiddenMenu() {
    let myProfile= this.profile;
    //let myProfile = 2;
    for(let page of this.pages) {
      if(myProfile == 1 && page.profile== 1 || page.profile== 2 || page.profile== 3 ) {
        console.log('I adm and can see all');
      }
      if(myProfile == 2 && page.profile== 3) {
        console.log('I'm user 2');
        page.hidden= true;
      }
      if(myProfile == 3 && page.profile == 2) {
        console.log('I am user 3');
        page.hidden= true;
      }
    }
  }

I my view I have

<ion-list>
      <button menuClose ion-item *ngFor="let p of pages" [hidden]="p.hidden" [class.activeHighLight]="checkActive(p)" (click)="openPage(p)">
        {{p.title}}
      </button>
</ion-list>

My problem, how to get the profile after login in API that need TOKEN and insert in app.components ?

5

You already have it in your subscription to user:authenticated.

6

ye true but this events come from home.ts I think so my app is getting slow