Pipe with object (array) -> Change Detection

Ionic Framework ionic-v3
1

I use a pipe with an array as argument.

When the array changes the pipe dosn’t update the view.
The solution I found is to set pure: false in the pipe.

Is this the only solution or is there a better way with pipe and objects?

P.S. My pipe make something like this:

Status: John, Maria, Max and four other users are online.

2

I have read somewhere (i believe angular.io) that complex pipes should be avoided. Instead, put the login in the component

This because of performance

3

Thanks for you answer Tommertom.

I think peformance is more important than nice readable code in this case. So I put the logic back in my html file.

I think when I put the logic in the ts file I have to manage the change detection of my array by my self.

4

Use an observable for that

I bet there is one upstream getting the array

5

I will try both.
I post an image when I’m at home how it looks. It is for a private project.

I use socket.io to inform the client that a new person is logged in on an other client. The client(s) only have to view this information.

6

Ok. I decided to make it in the html-file. In my case it is ok. But generally the observable woud be the better solution.


         <span *ngIf="ownChatroom.members.length === 0">
            Status: Niemand online
          </span>
          <span *ngIf="ownChatroom.members.length === 1">
            Status: {{ownChatroom.members[0].displayName}} online
          </span>
          <span *ngIf="ownChatroom.members.length === 2">
            Status: {{ownChatroom.members[0].displayName}} und {{ownChatroom.members[1].displayName}} online
          </span>
          <span *ngIf="ownChatroom.members.length === 3">
            Status: {{ownChatroom.members[0].displayName}}, {{ownChatroom.members[1].displayName}} und {{ownChatroom.members[1].displayName}}
            online
          </span>
          <span *ngIf="ownChatroom.members.length > 3">
            Status: {{ownChatroom.members[0].displayName}}, {{ownChatroom.members[1].displayName}}, {{ownChatroom.members[1].displayName}}
            und {{ownChatroom.members.length -3 }} weitere User online
          </span>

grafik
grafik.png951×274 18.7 KB

7

You may want to take a look at the NgPlural directive found here.
It’s designed for cases like this.

1 Like
8

Thank you for this hint SigmundFroyd. Now my code looks much nicer :slight_smile:


	<span [ngPlural]="followingChatroom.members.length">
		<ng-template ngPluralCase="=0">
		  Status: Niemand ist online.
		</ng-template>
		<ng-template ngPluralCase="=1">
		  Status: {{followingChatroom.members[0].displayName}} ist online.
		</ng-template>
		<ng-template ngPluralCase="=2">
		  Status: {{followingChatroom.members[0].displayName}} und {{followingChatroom.members[1].displayName}} sind online.
		</ng-template>
		<ng-template ngPluralCase="=3">
		  Status: {{followingChatroom.members[0].displayName}}, {{followingChatroom.members[1].displayName}} und {{followingChatroom.members[2].displayName}}
		  sind online.
		</ng-template>
		<ng-template ngPluralCase=">3">
		  Status: {{followingChatroom.members[0].displayName}}, {{followingChatroom.members[1].displayName}}, {{followingChatroom.members[1].displayName}}
		  und {{followingChatroom.members.length -3 }} weitere User sind online.
		</ng-template>
	</span>
9

Turns out the ngPlural throws this error when I heva more Users online then I have cases…

grafik