CODEWITHSUNDEEP
cordovatypescriptangularionic2
Adrian
Adrian

Reputation: 532

Hiding element in ionic2: Can't bind to '*ngIf' since it isn't a known native property

I have a problem with DOM elements in my ionic2 app. When I trying do something like this:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
  <div *ngIf="'admin'=='admin'">
    <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
  </div>
  <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>

everything is OK. But when I set angular variable in constructor:

export class TabsPage {
  constructor() {
    this.userRole = "admin";

and 

<ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
      <div *ngIf="{{userRole}}=='admin'">
        <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
      </div>
      <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>
    </ion-tabs>

the application returns me an error:

Can't bind to '*ngIf' since it isn't a known native property

How I can hide this element when userRole = 'admin'?

Upvotes: 1

Views: 5764

Answers (1)

acdcjunior
acdcjunior

Reputation: 135862

The condition expression at *ngIf="expression" is already going to be evaluated, no need to use {{}}.

So

<div *ngIf="{{userRole}}=='admin'">

should really be

<div *ngIf="userRole=='admin'">

Upvotes: 3

Related Questions