How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

Question

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

.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 holds an observable with the following data:

[
  {
    "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 desired HTML output should be:

Peoples

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

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

To prevent repeating the same {{contact['type']}} in the view if it's the same as the previous one during the loop, a check needs to be added. The title which depends on {{contact['type']}} should also not repeat until the current one is different from the previous one.

How can this issue be handled in HTML?

angular typescript observable

Answer 1

Answer №1

To effectively manage your items, consider categorizing them under groups such as Peoples, Teams, and so on.

If you prefer checking conditions in the template, you can save the output of listContact | async into a variable and then utilize index:

<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

Answer 2

To effectively manage your items, consider categorizing them under groups such as Peoples, Teams, and so on.

If you prefer checking conditions in the template, you can save the output of listContact | async into a variable and then utilize index:

<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

Answer 3

Answer №2

If you need to group items in Angular, you can create a custom 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]
    }));
  }
}

To use this pipe in HTML, you can do the following:

<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>

Check out a demo on Stackblitz here: https://stackblitz.com/edit/angular-groupby-pipe.

Answer 4

If you need to group items in Angular, you can create a custom 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]
    }));
  }
}

To use this pipe in HTML, you can do the following:

<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>

Check out a demo on Stackblitz here: https://stackblitz.com/edit/angular-groupby-pipe.

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

.html

listContact holds an observable with the following data:

The desired HTML output should be:

Answer №1

Answer №2

Similar questions

Observe how Observable breaks down strings into individual letters (like in Karma and Angular)

Altering or including new space variables within a custom Chakra-ui theme

Utilize the useState() hook to add an object and display its data in a React Native

Unlocking the Power of Asynchronous Data in Angular's Dynamic Form Patterns

Troubleshooting: @HostListener for window scroll event not functioning as expected

How to conditionally import various modules in Next.js based on the environment

Tips on how to effectively simulate a custom asynchronous React hook that incorporates the useRef() function in jest and react-testing-library for retrieving result.current in a Typescript

Experimenting with Jest testing for a Component or Service that includes the use of "declare var" functionality

Can we potentially extract shared components of a template?

In TypeScript, an interface property necessitates another property to be valid

Visual Studio Code is unable to identify the TypeScript module located within the `node_modules` directory

Tips for achieving server-side pagination with client-side sorting

Angular attribute directive accesses a sibling attribute reference

Unleashing the power of RXJS: Leveraging IntervalObservable coupled with the

Is anyone able to assist with resolving the problem of `tsc` constantly monitoring `node_modules`?

The VSCode Extension fails to launch after being packaged

Tips on setting up an npm package for automatic updates

Ways to eliminate angular-fontawesome from a project?

Issue in TypeScript: The module "*.svg" does not have a component that is exported named "ReactComponent"

Tips for broadcasting a router event