CODEWITHSUNDEEP
angular
Dharmesh
Dharmesh

Reputation: 6003

How to execute *ngIf-else of else condition only once?

I iterate through an array in a div with *ngFor. Inside this div there is another div with an *ngIf else condition, where the else condition matches 25 values.

My query is that instead of 25 values, I want to print only the first value, while the other 24 values should be hidden or ignored. Note that the other 25 values that match the if-statement should all be visible. How it is possible? 

<div *ngFor="let item of messageArray; let index = index">
  <div *ngIf="userids == item.userid;else other_content">{{item.username}}</div>
  <ng-template #other_content>{{item.username}}</ng-template>
</div>

app.component.ts

constructor(private socketService : SocketserviceService) { 
  this.socketService.newMessageReceived().subscribe((data) => {
    this.messageArray = data.payload;
  });
};

Upvotes: 1

Views: 2749

Answers (3)

Asanka
Asanka

Reputation: 1648

app.component.ts

userNamePrintInElse =""
constructor(private socketService : SocketserviceService) { 
  this.socketService.newMessageReceived().subscribe((data) => {
    this.messageArray.push(data);userids
    this.userNamePrintInElse = this.messageArray.filter(data => data.userid != this.userids )[0].username
  });
};

in Html

<div *ngFor="let item of messageArray; let index = index">
  <div *ngIf="userids == item.userid">{{item.username}}</div>
</div>
  <div >{{userNamePrintInElse}}</div>

Upvotes: 2

user4676340
user4676340

Reputation:

You can take advantage of the loop itself with the first operator : 

<div *ngFor="let item of messageArray; let index = index; first as isFirst">
  <div *ngIf="isFirst>{{item.username}}</div>
</div>

EDIT

Now that I have understood your question : you can't do what you want in the template only.

In order to achieve what you want, you will be forced to create two getters : one for the message respecting the condition, one for the others. 

get messagesWithIdMatch() {
  return this.messageArray.filter(item => item.userid === this.userids);
}

getFirstMessageWithoutIdMatch {
  return this.messageArray.filter(item => item.userid !== this.userids)[0];
}

Now your HTML becomes this : 

<div *ngFor="let item of messagesWithIdMatch">
  <div>{{item.username}}</div>
</div>
<div>
  <div>
    {{ getFirstMessageWithoutIdMatch.username }}
  </div>
</div>

This will display the 25 items matching your condition, and will display only the first item not matching it.

Upvotes: 5

rguerin
rguerin

Reputation: 2128

The *ngIf and *ngFor directives are mostly here for display purpose. If you want to supply any logic, then you should avoid doing it inside your template.

Split your array inside your component and then display it via two different directives inside your component.

public otherElement: any = _.first(messageArray)
public filteredArray: any[] = _.filter(messageArray, item => item.id != otherElement.id)

You will have yout "otherElement" and your "filteredArray" already set. You can then display them like this :

<div *ngFor="let item of filteredArray; let index = index">
  <ng-container>
    <div>{{item.username}}</div>
  </ng-container>
</div>
<ng-template #other_content>{{otherElement.username}}</ng-template>

Upvotes: 1

Related Questions