Ionic2 ng-class on ion-row scss


I am trying to duplicate this in Ionic1:
<div class="row" ng-class='"item-red">

To this in Ionic2:
<ion-row [ng-class]="item-red">

I have put the following in the scss file of the page:
.page1 {
item-red {
color: #FFF;
background-color: #FF6666;

No love. Not sure if my use of ng-class is wrong or the scss or if I cannot add it to ion-row?

I am however able to use <ion-row class="item-red">


Kebab case doesn’t work in Angular2 any more. You want ngClass.


I have tried with:
<ion-row [ngClass]="item-red">
No luck.
I imported it also using:
import {NgClass} from ‘angular2/common’;


I’m confused as to what you’re trying to achieve with “item-red”. The NgClass directive is for conditionally adding classes.


item-red is a simplified version of what I actually was using, which was a call to a function to process some object data and set the color of the row based on the returned data.
eg in Ionic 1:
Controller: if(low){return ‘item-red’)}
Template: <div class="row" ng-class='getPFG('>
CSS: .list .item-red { color: #FFF; background-color: #FF6666; }

Now I am setting the class in the object before sending to the view and using the following, which works:
<ion-row class="{{obj.dataclass}}"> ( dataclass is the processed data ‘low’ that was in the above controller.

So, this works, while ngClass does not, for a reason that is likely entirely my noobness.

What I would like to do is replicate the Ionic1 way above using ngClass so I can process the data in the view.
Something like:
<ion-row [ngClass]=getPFG('> ( PFG is a function in the page.ts file )


I am new to ionic. I am using ionic 2. I stuck in using ng class property in typescript file.

HTML file

<span [ngClass]="displayText">toggled with ngClass</span> <button (click)="toggle()">Toggle</button>

TS file

toggle() {
this.displayText = ‘show-class’;

But i am getting error “property does’t exist in typescript class”. How do i access the ngClass property in ionic 2.

Please take me out from this issue.

Adding CSS class to an existing button

That’s because displayText isn’t declared in your class.
Put public displayText:any; right after “export class xxxxx {” in your .ts file