0

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!

Improve this question

3 Answers 3

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Cool, this one is interesting. As you can see in one answer behind I was discussing why the <p> wrapping doesn't work when I bind the content but in your case, it's working well. Thank you, there they go your first points of good response ;)
1

You can just do

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

3 Comments

I was trying this right now, the thing is that it works if you put it inside <ion-label> or <ion-item> but not if it's inside <p> or <button>, it's weird.. :/
well that's strange, can you produce a stackblitz
Of course, see, I did it on the "home" page. It's a simple display of items. In one I'm using the ion labels and the button and p in the other (which is not showing), it's more to research than the problem itself by now, haha stackblitz.com/edit/ionic-zvh4cr
1

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.

Improve this answer

2 Comments

It's not working for now but I've got the idea. I didn't know that you can put this as [class] = "condition", is it a known practice?
you can do that way or [ngClass]="{'bg-client': item.client, 'bg-invoice': !item.client}"

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.