Angular2 - How to use string enums with *ngIf

Question

How do I pass enum to a function when I use *ngIf in Angular?

I have the follow code:

export enum RoleType {
    User='User',
    Admin='Admin'
}

component function

public hasAccess(role: RoleType) {
   //check role type and return true or false
}

component html

<div id="adminDiv" *ngIf="hasAccess('Admin')">
</div>

When I build this, it keeps complaining. It cannot convert the string to the enum, is there a way around this?

Answer 1

Here is a much cleaner way of doing this. Do the following in your component.ts

allRoleTypes = RoleType;

and in your html

*ngIf="role===allRoleTypes.User"

You don't need to write any method.

Answer 2

As @Buczkowski suggested, you can do it like this:

export enum RoleType {
    User = 'User',
    Admin = 'Admin'
}

component

RoleType = RoleType; // This way you can access its properties from the template.

public hasAccess(role: RoleType) {
    //check role type and return true or false
}

component html

<div id="adminDiv" *ngIf="hasAccess(RoleType.Admin)">
</div>

StackBlitz example