What is the best way to incorporate a function within an ngIf statement in Angular?

Question

What is the best way to incorporate a function within an ngIf statement in Angular?

There are 2 functions in my code

loadItems(): void {
this.service.query().subscribe((res: HttpResponse<Item[]>) => 
 (this.items = res.body || []));
 }
 
loadAuditByItem(item: Item) {
this.service.auditByItem(item.id!).subscribe((res: HttpResponse<ItemAudit[]>) => 
(this.auditByItem = res.body || []));
 }

I am trying to showcase data from both loadItems() and loadAuditByItem() on the same page. I have successfully displayed the name and description from loadItems(), but I also need to show the "createdBy" information from loadAuditByItem(item).

<div *ngFor="let item of items">
    <div *ngIf="loadAuditByItem(item)">
        <span>Name: {{ item.name}}</span>
        <span>Description : {{ item.description }}</span>
        <span>Created by: {{ auditByItem .createdBy}}</span>
    </div>
</div>

angular typescript

Answer 1

Answer №1

Employing a function call within the ngIf can significantly impact performance (you can verify this by adding a console.log and monitoring how many times it is invoked). Instead, consider utilizing Pipes. With that being said, here's a solution tailored to your specific scenario:

import { forkJoin, Observable, of, Subject } from "rxjs";
import { map, switchMap } from "rxjs/operators";
...

  public items$: Observable<Item[]>;

...

  loadItems(): void {
    // It's advisable to enhance your backend API to retrieve all data in a single call
    // Nested calls could result in an N+1 calls issue.

    this.items$ = this.service.query().pipe(
      map((res: HttpResponse<[]>) => res.body || []),
      switchMap((items: []) => {

        if (items.length === 0) {
          return of([]);
        }

        return forkJoin(
          items.map((item: any) =>
            this.service.auditByItem(item.id).pipe(
              map(audit => {
                item.audit = audit;
                return item;
              })
            )
          )
        );
      })
    );
  }

<div *ngFor="let item of (items$ | async)">
    <div>
        <span>Name: {{ item.name}}</span>
        <span>Description : {{ item.description }}</span>
        <span>Created by: {{ item.audit.createdBy}}</span>
    </div>
</div>

Bonus: It's not recommended to expose HttpResponse directly from the service; it's better to solely return the Item[] and encapsulate the HttpResponse internally.

Answer 2

Employing a function call within the ngIf can significantly impact performance (you can verify this by adding a console.log and monitoring how many times it is invoked). Instead, consider utilizing Pipes. With that being said, here's a solution tailored to your specific scenario:

import { forkJoin, Observable, of, Subject } from "rxjs";
import { map, switchMap } from "rxjs/operators";
...

  public items$: Observable<Item[]>;

...

  loadItems(): void {
    // It's advisable to enhance your backend API to retrieve all data in a single call
    // Nested calls could result in an N+1 calls issue.

    this.items$ = this.service.query().pipe(
      map((res: HttpResponse<[]>) => res.body || []),
      switchMap((items: []) => {

        if (items.length === 0) {
          return of([]);
        }

        return forkJoin(
          items.map((item: any) =>
            this.service.auditByItem(item.id).pipe(
              map(audit => {
                item.audit = audit;
                return item;
              })
            )
          )
        );
      })
    );
  }

<div *ngFor="let item of (items$ | async)">
    <div>
        <span>Name: {{ item.name}}</span>
        <span>Description : {{ item.description }}</span>
        <span>Created by: {{ item.audit.createdBy}}</span>
    </div>
</div>

Bonus: It's not recommended to expose HttpResponse directly from the service; it's better to solely return the Item[] and encapsulate the HttpResponse internally.

Answer 3

Answer №2

To make it easier for *ngIf to handle the subscription, I decided to return the Observable and utilize the AsyncPipe.

public fetchAuditRecord(item: Item): Observable<any> {
    return this.service.retrieveAuditRecordByItem(item.id!);
}

<div *ngFor="let item of items">
    <div *ngIf="fetchAuditRecord(item) | async as audit">
        <span>Name: {{ item.name }}</span>
        <span>Description : {{ item.description }}</span>
        <span>Created by: {{ audit.createdBy }}</span>
    </div>
</div>

Answer 4

To make it easier for *ngIf to handle the subscription, I decided to return the Observable and utilize the AsyncPipe.

public fetchAuditRecord(item: Item): Observable<any> {
    return this.service.retrieveAuditRecordByItem(item.id!);
}

<div *ngFor="let item of items">
    <div *ngIf="fetchAuditRecord(item) | async as audit">
        <span>Name: {{ item.name }}</span>
        <span>Description : {{ item.description }}</span>
        <span>Created by: {{ audit.createdBy }}</span>
    </div>
</div>

What is the best way to incorporate a function within an ngIf statement in Angular?

Answer №1

Answer №2

Similar questions

Exploring the use of @Query() object in Nest.js for iteration

The map function in Math.min returns NaN when there is a 0 in the collection

I am attempting to fetch data from an API and display it on the screen, yet I am encountering an issue where only the latest data from the API response is being rendered

Managing data with Angular 2: Setting and retrieving values

Adding a visible icon to an Angular Material dropdown: A step-by-step guide

Upgrade Angular to the latest version in Visual Studio 2017

Exploring JSONPath in Cypress

Eliminate the need to input the complete URL every time when making server calls

Select and activate a single input from multiple options in Angular

Is there a special function in AngularDart that gets triggered after a component has been rendered?

Utilizing Express, Request, and Node.js to manage GET requests in typescript

Encountering Storage Access Problem on Android following upgrade to API 33

Deleting a particular item in Angular involves utilizing specific techniques for removal, while updating a

The browser is unable to load the Angular app's component

Experiencing complications with an Angular 2 router

Tips for accessing the value and text of an Angular Material mat-select through the use of *ngFor

Utilize the VSCode debugger to troubleshoot a .NET Core application through debugging with Visual Studio's IIS Express

Using Handlebars.js with Angular CLI versions 6 and above: A Step-by-Step Guide

Angular component equipped with knowledge of event emitter output

Creating a Chrome extension with Angular 5: A comprehensive guide