CODEWITHSUNDEEP
cssangularionic-frameworkionic2
halsdunes
halsdunes

Reputation: 1247

Right aligning columns given conditions in Angular 2 / Ionic 2

I want to selectively right align certain columns by applying justify-content-end and text-right when they match certain conditions for each record such that the rendered version looks something like this:

<ion-content padding>

  <ion-grid>
    <ion-row>
      <ion-col col-8>Stuff</ion-col>
    </ion-row>
    <ion-row justify-content-end text-right>
      <ion-col col-8>Stuff 2</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-8>Stuff 3</ion-col>
    </ion-row>
    <ion-row justify-content-end text-right>
      <ion-col col-8>Stuff 4</ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

How can I put that in the code? Would I need to use *ngIf in some way?

Upvotes: 2

Views: 1648

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58553

There is no need of *ngIf, all you need is ngClass :

<ion-row [ngClass]="{'justify-content-end': true, 'text-right': false }">...</ion-row>

// OR : If both classes have same conditions

<ion-row [ngClass]="{'justify-content-end text-right' : true}">...</ion-row>

In place of true / false use your conditions

For more details please read : NgClass

For dynamic attribute use,

[attr.justify-content-end]='true/false'

Upvotes: 3

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

You can use something like this

When True:

<ion-row justify-content-end text-right *ngIf="msg.mycondition">
  <ion-col col-8>Stuff 2</ion-col>
</ion-row>
<ion-row *ngIf="!msg.mycondition">
  <ion-col col-8>Stuff 2</ion-col>
</ion-row>

Upvotes: 2

Related Questions