Use *ngIf with Ionic

Question

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!

Answer 1

You can just do

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

Answer 2

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.

Answer 3

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