CODEWITHSUNDEEP
angulartypescriptionic-framework
maximelian1986
maximelian1986

Reputation: 2452

Angular ng-class does not compile/work

ng-class directive does not compile and in inspector visible as is at runtime.

ts script

export class TotalPage {

  showClass: boolean;

  constructor(public navCtrl: NavController ,public http: Http) {

        this.showClass = false;

  }

}

html

<ion-header>

  <ion-navbar>
    <ion-title>Total</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <div ng-class="{expenceBg:showclass}">Test</div>  
</ion-content>

scss

$expence-bg: #ffcccc;
$income-bg: #00cccc;
page-total {
    .expenceBg{
        background-color: $expence-bg;
    }
    .incomeBg{
        background-color: $income-bg;
    }
}

.expenceBg{
        background-color: $expence-bg;
    }

So when I run it it have Test so it does not compile that "ng-class" section. What am I doing wrong?

Upvotes: 0

Views: 64

Answers (1)

Rax Weber
Rax Weber

Reputation: 3780

ng-class is used only in AngularJS, not Angular (2+). Use [ngClass] instead.

<ion-content padding>
  <div [ngClass]="{expenceBg:showclass}">Test</div>  
</ion-content>

Upvotes: 2

Related Questions