Angular 2 show and hide button component

Question

I am trying to show a button (that opens a dialog component) either the current user is admin or not. The problem is that I cannot figure out how.

This is my html of my component:

<app-list [items]="items"
  [page]="'1'"
  [itemsPerPage]="'40'"
  [hasPager]="false"
  [hasFilters]="false"
  [itemInfo]="itemInfo"
  [loading]="loading"
  (onAdd)="handleOnAdd($event)"  -> this one renders the button
  (onMenuItem)="handleOnMenuItem($event)">
</app-list>

In app-list component:

<app-add-button *ngIf="itemInfo.types"
  [hasPager]="hasPager"
  (onAction)="onAdd.emit($event)">
</app-add-button>

// .ts
  @Output() onAdd = new EventEmitter();

What I wanted is to do something like this:

  [loading]="loading"
  *ngIf="loggedUser.coachAdmin"
  (onAdd)="handleOnAdd($event)"
  (onMenuItem)="handleOnMenuItem($event)">

To display the button(or at least making it functional) only if the user is a admin. There is such a way? Or at least how to solve it?

It's not working to add the ngIf(see last piece of code), so wasn't sure how to handle it. — IleNea
– IleNea, Commented Dec 19, 2018 at 19:40
The project is huge, I cannot separate things. I am just curious if I can write the ngIf as to show/hide the (onAdd)="handleOnAdd($event)" — IleNea
– IleNea, Commented Dec 19, 2018 at 19:50
ok, I assume you can extract relevant piece of code into a stackblitz and thus can be checked and verified easily. but never mind :) — ABOS
– ABOS, Commented Dec 19, 2018 at 19:54

Praveen Kumar · Accepted Answer · 2018-12-19 20:25:46Z

1

I am not sure if coachAdmin is a boolean variable. If not, you would have to change your ngIf to look something like this:

*ngIf="loggedUser.coachAdmin==='ADMIN'"

answered Dec 19, 2018 at 20:25

Praveen Kumar

5432 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomiplaz · Accepted Answer · 2018-12-19 20:54:12Z

1

First, to answer your question in the comments:

I am just curious if I can write the ngIf as to show/hide the (onAdd)="handleOnAdd($event)"

No, you can't use *ngIf to "show/hide" the (onAdd) attribute.

If you want to show/hide the component, then the code you posted (*ngIf="loggedUser.coachAdmin") should work fine.

If, however, you want to conditionally execute some code (depending on if user is admin or not), then you should handle that inside your component class definition.

answered Dec 19, 2018 at 20:54

tomiplaz

4864 silver badges9 bronze badges

Comments

Ethan · Accepted Answer · 2018-12-20 00:12:12Z

0

You can try another way by using [hidden]

[hidden]="loggedUser.coachAdmin !== 'ADMIN'"

answered Dec 20, 2018 at 0:12

Ethan

291 bronze badge

Comments

John Montgomery · Accepted Answer · 2018-12-20 00:25:10Z

0

If you want to display the button only for admins, just add it as a condition in the *ngIf:

<app-add-button *ngIf="itemInfo.types && loggedUser.coachAdmin"
  [hasPager]="hasPager"
  (onAction)="onAdd.emit($event)">
</app-add-button>

If you want it to be functional only for admins, the shortest way would be to do it with a short-circuit logic check:

<app-add-button *ngIf="itemInfo.types"
  [hasPager]="hasPager"
  (onAction)="loggedUser.coachAdmin && onAdd.emit($event)">
</app-add-button>

answered Dec 20, 2018 at 0:25

John Montgomery

7,10610 gold badges58 silver badges73 bronze badges

Collectives™ on Stack Overflow

Angular 2 show and hide button component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related