Ionic2 ng-class on ion-row scss

Ionic Framework ionic-v3
1

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">

2

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

3

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

4

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

5

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(obj.data)'>
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(obj.data)'> ( PFG is a function in the page.ts file )

6

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

Example:
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.

7

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