CODEWITHSUNDEEP
cssionic2
Richard
Richard

Reputation: 8935

CSS changing style

I am using Ionic2, and have and ion-content tag. Depending on a variable, I want to change the style on the tag.

I have tried the following, but it does not work:

<ion-content *ngIf="persoModel.type === 0" padding class="person-content-wanted">
<ion-content *ngIf="personModel.type === 1" padding class="person-content-offered">
...
</ion-content>

Can anyone please suggest a way yo achieve this?

Thanks

Upvotes: 0

Views: 59

Answers (2)

Mohan Gopi
Mohan Gopi

Reputation: 7724

here personModel is a boolean if it is true you will get person-content-wanted class if it is false you will get person-content-offerred

 <ion-content [class]="personModel? 'person-content-wanted' : 'person-content-offered'">

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

Just to add another way to do it, according to Ng2 docs, the proper way to use ngClass is

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

So in your case it should work by doing:

<ion-content padding [ngClass]="{'person-content-wanted': persoModel.type === 0, 'person-content-offered': personModel.type === 1}"]>
...
</ion-content>

Upvotes: 0

Related Questions