Using *ngFor with async pipe with conditional display in html in angular8

Question

.html

<ng-container *ngFor="let contact of listContact | async; let index = index;">
      <h6 class="title" *ngIf="contact && contact['type']">
        {{contact['type']}}
        </h6>
   <div> {{contact['id']}}</div>
 </ng-container>

listContact an observable contains:-

[
  {
    "id": "u-8cf4161b-240f-5d7a-b5df-0522739c62d9",
    "type": "Peoples"
  },
  {
    "id": "u-0580ff64-c959-5690-bc54-16c43b28065d",
    "type": "Peoples"
  },
  {
    "id": "u-44e5a40a-a367-55e0-baf1-1eacccafe5f2",
    "type": "Teams"
  }
]

The expected(desired) html output:-

Peoples

u-8cf4161b-240f-5d7a-b5df-0522739c62d9
u-0580ff64-c959-5690-bc54-16c43b28065d

Teams
u-44e5a40a-a367-55e0-baf1-1eacccafe5f2

How to add a check that if previous {{contact['type']}} in for loop is same as current {{contact['type']}} in for loop , then not add {{contact['type']}} in view. title is dependent on {{contact['type']}} and too should not repeat until previous {{contact['type']}} is different from current one.

How to handle it in html for this issue?

parse the listContact json array and do the manipulations in TypeScript and bind it. — Rahul Somasundaram
– Rahul Somasundaram, Commented May 6, 2020 at 10:35

yurzui · Accepted Answer · 2020-05-06 11:05:01Z

2

The right way to handle it would be grouping your items into categories like Peoples, Teams, etc.

But if you want to check your condition in template then you can store the result of listContact | async extract into a variable and then use index on it:

<ng-container *ngFor="let contact of listContact | async as contacts; let index = index;">
  <h6 class="title" *ngIf="contact.type && (!contacts[index - 1] || contacts[index - 1].type !== contacts[index].type)">
     {{contact.type}}
  </h6>
  <div> {{contact.id}}</div>
</ng-container>

Ng-run Example

answered May 6, 2020 at 11:05

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Comments

Hien Nguyen · Accepted Answer · 2020-05-06 11:22:26Z

You can create a groupBy pipe

@Pipe({ name: "groupBy" })
export class GroupByPipe implements PipeTransform {
  transform(value: Array<any>, field: string): Array<any> {
    const groupedObj = value.reduce((prev, cur) => {
      if (!prev[cur[field]]) {
        prev[cur[field]] = [cur];
      } else {
        prev[cur[field]].push(cur);
      }
      return prev;
    }, {});
    return Object.keys(groupedObj).map(key => ({
      key,
      value: groupedObj[key]
    }));
  }
}

And use in html as

<ng-container *ngFor="let contact of listContact | groupBy:'type'; let index = index;">
      <h6 class="title">
        {{contact.key}}
        </h6>
   <div *ngFor="let value of contact.value">{{value.id}}</div>
 </ng-container>

Stackbliz https://stackblitz.com/edit/angular-groupby-pipe?

Collectives™ on Stack Overflow

Using *ngFor with async pipe with conditional display in html in angular8

.html

listContact an observable contains:-

The expected(desired) html output:-

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

.html

listContact an observable contains:-

The expected(desired) html output:-

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related