Angular 2 add style based on pipe result

Question

I am not sure, if this is possible.

<span class="nav-label second-level-text" style="margin-left: 10px;">
{{partner.name}}
    <span class="badge"
      *ngIf="unreadConversations.length > 0 | unreadConversationForPartner : [unreadConversations,partner.id]">
    {{unreadConversations.length | unreadConversationForPartner : [unreadConversations,partner.id]}}
    </span>
</span>

I have the span over here. And I am applying filter to the *ngIf and also displaying the value of returned filter(which is the count)

I will like to display a style if the count returned from the pipe is greater than 0, and if not don't display the style. However I am able to achieve this by *ngIf and Filter but if the value of the Filter is changed, then the *ngIf doesnot change.

For instance. I have 2 items in the array.

Item 1: The length is 1 and it displays the span and does its job...

Item 2: At start the length is 0 and it does not display ( which is right behaviour) but the filter value changes, but then the *ngIf is not called again.

unreadConversationForPartner pipe

transform(value: any, ...args: any[]): any {
        var count = 0;
        var partnerId = args[0][1];
        var conversations = args[0][0];
        conversations.forEach(element => {
            if(element.partnerId == partnerId) count++
        });
        return count;
    }

Let me know if the information provided is not enough or clear.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-07-31T08:26:50

You can use as that was introduced a while ago

*ngIf="unreadConversations.length > 0 | unreadConversationForPartner : [unreadConversations,partner.id] as result"

and then use it in other directives or bindings

[ngStyle]="{backgroundColor: result >= 5 ? 'red' : 'blue'}"

See also https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable

Angular 2 add style based on pipe result

1 Answers