App.html using ngif to alter list

Ionic Framework ionic-v3
1

I would like to alter the sidemenu list depending on certain situations, sudh as logged in or not.

How best to alter the following with ngIf - or other :
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

I should note, I am trying to do this without creating two or more separate lists - one for each scenario.

2

To make long story short, you should have 2 different menus (loggedIn and loggedOut) in your app.html template and enable/disable them depending on your app’s state.

For more implementation details have a look at Ionic Conference App

Hope it helps.

3

I would personally create a global variable that basically indicates whether the user is logged in (like a true/false) and have the ngIf check the value of that variable. Like put *ngIf=“isLoggedIn()” on any individual menu item that you only want showing for a logged-in user and vice versa. That way you have just one list

4

I have a var authRequired which is added to the pages list, like so:

pages: Array<{title: string, component: any, authRequired: boolean}>;
this.pages = [
        { title: 'Zero', component: WorkPage, authRequired:true },
        { title: 'Page One', component: Page1, authRequired:false },
        { title: 'Page Two', component: Page2, authRequired:false },
      ];

My problem is adding the ngIf sample here in the app.html:

<button *ngIf="p.authRequired" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{ p.title}} </button>

Error: Can’t have multiple template bindings on one element. Use only one attribute named ‘template’ or prefixed with *

@skydive, yes two lists work but I may need multiple lists and would like to try and handle this on a per item basis.\

5

Oh I see what you’re saying now. First of all, I’m somewhat new to Ionic and angular but it seems you can’t have he *ngFor and *ngIf in the same element. So either try to do one or the other on a parent element to split it up, or check out something like this:

I’ve not personally done it but this might be what you’re looking for.

Let me know what you think

6

I tried splitting them up using the parent element but if I put the nfFor in the child element, I get a button or list item everytime regardless of the ngIf.
The following produces a list item - a button for every page. Just no title in it.

`<button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage§”>

{{ p.title}}
`
7

Alright. Check out the pipes thing. That look like it’ll work for you?

8

I agree - looks good. Working on it now.

9

@biggtrav05 - that did the trick and now I know about using Pipes - Thank you!

Here is the snippet for the menu:
<ion-list *ngIf="auth.authenticated()"> <button menuClose ion-item *ngFor="let p of pages | menupipe:{authRequired:true}" (click)="openPage(p)"> {{ p.title}} </button> </ion-list>

Here is the transform portion of the pipe ( you can use ‘ionic g pipe nameofpipe’ to generate one but watch out for the name it creates - there was a bug ):

transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> { return items.filter(item => { for (let field in conditions) { if (item[field] !== conditions[field]) { return false; } } return true; }); }

An in the app.ts, the list of pages now includes authRequired but could be anything
this.pages = [ { title: 'Intro', component: WorkPage, authRequired:false }, { title: 'Page One', component: Page1, authRequired:true },

Thanks again.