CODEWITHSUNDEEP
angularionic-framework
Juli15
Juli15

Reputation: 411

Use *ngIf with Ionic

Good morning. I'm developing an application in which I have clients and invoices on the same array (of objects). The thing is that I'm displaying them all and there's a boolean property named client which indicates if this object is client or invoice (true-false).

I'm doing a for to show them and what I want to do is to show the clients in another way than the invoices.

I've tried this and it's working well:

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  {{ item.client? "Client" : item.text}}
</button>

But as I said, what I want to do is to change the clients colour and I can't do it if they're not inside some tag. The trouble that I'm having is to make an if-else to display a tag if it's client and display another if it's not.

I've also tried with:

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  <p *ngIf="item.client == false">{{item.text}}</p>
  <p *ngIf="item.client == true">{{item.text}}</p>
</button>

But again, as the other things it didn't work. Would be great to find a solution, thank you!

Upvotes: 0

Views: 2900

Answers (3)

Dharmarajm
Dharmarajm

Reputation: 147

In angular way, you can use ngClass for better rendering.

ex: [ngClass]="{'first': true, 'second': true, 'third': false}"

Depending on the condition it will call the class in css.

you can try this to solve the problem.

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  <p [ngClass]="{'first': item.client=='Client', 'second': item.text=='data'}">{{item.client ? 'Client' : item.text}}</p>
</button>

Any queries in ngClass please check this link https://angular.io/api/common/NgClass

I hope this it will work

Upvotes: 1

Leonardo Neninger
Leonardo Neninger

Reputation: 586

Try this...

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)"
    [class.bg-client]="item.client" 
    [class.bg-invoice]="!item.client" >
  {{item.client ? 'Client' : item.text}}
</button>

The bg-client and bg-invoice can be replaced with your classes.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

You can just do

 <p *ngIf="item.client">Client</p>
 <p *ngIf="!item.client">{{item.text}}</p>

Upvotes: 1

Related Questions