Optimizing Conditional Rendering with ngFor and ngIf in Angular: Best Practices and Performance Considerations

Problem Context and Core Challenge

In Angular application development, developers frequently need to combine *ngFor and *ngIf directives to implement conditional list rendering. A typical scenario involves iterating through an array while displaying only elements that meet specific criteria. The initial implementation often appears as follows:

<button *ngFor="let item of items">
    <div *ngIf="(item.data.type == 1)">
        {{item.data.name}}
    </div>
</button>

While this code correctly displays items with type value of 1, it creates a significant problem: empty <button> elements are still generated for all items where type is not 1. These empty buttons not only degrade user experience but also add unnecessary DOM manipulation overhead, reducing application performance.

Solution One: Structural Rearrangement and ng-container Application

The most direct and recommended solution involves reorganizing the template structure to elevate the conditional check outside the loop. This approach ensures that button elements are generated only for items meeting the criteria:

<div *ngFor="let item of items">
    <button *ngIf="(item.data.type == 1)">
        {{item.data.name}}
    </button>
</div>

While this solves the empty button problem, it introduces a new <div> wrapper that may affect CSS styling and layout structure. To maintain template cleanliness, Angular provides the <ng-container> element as a logical container that leaves no trace in the final DOM:

<ng-container *ngFor="let item of items">
    <button *ngIf="(item.data.type == 1)">
        {{item.data.name}}
    </button>
</ng-container>

The use of <ng-container> avoids creating additional DOM nodes while maintaining template clarity, representing best practice for handling such scenarios.

Solution Two: Component Method Filtering

An alternative approach involves defining filtering functions in the component class to preprocess data before rendering:

// Method in component class
filterItemsOfType(type) {
    return this.items.filter(x => x.data.type == type);
}

Template usage:

<button *ngFor="let item of filterItemsOfType('1')">
    {{item.data.name}}
</button>

Although this method offers concise code, it presents significant performance concerns. Angular's change detection mechanism calls this method during every detection cycle, even when data remains unchanged. For large datasets or frequently updated scenarios, this creates unnecessary computational overhead. Therefore, direct invocation of component methods in templates should be avoided unless specifically required.

Solution Three: Custom Pipe Filtering

Custom pipes provide a more elegant data filtering solution. By implementing the PipeTransform interface, developers can create reusable filtering logic:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filterByType'
})
export class FilterByTypePipe implements PipeTransform {
    transform(items: any[], type: number): any[] {
        if (!items) return [];
        return items.filter(item => item.data.type === type);
    }
}

After declaring the pipe in the module, it can be used directly in templates:

<button *ngFor="let item of items | filterByType:1">
    {{item.data.name}}
</button>

Pipes possess the characteristic of pure pipes, where Angular caches transformation results and recalculates only when input values change, providing some performance optimization. However, frequent data changes may still cause performance issues.

Performance Optimization and Best Practices Summary

Comparing the three solutions comprehensively leads to the following best practice recommendations:

1. Prioritize Structural Rearrangement with ng-container: This represents the solution most aligned with Angular's design philosophy, addressing both empty element issues and unnecessary performance overhead.
2. Use Component Methods Cautiously: Consider this approach only in scenarios with infrequent data changes and simple filtering logic, while remaining mindful of performance impacts.
3. Employ Custom Pipes Appropriately: Custom pipes serve as excellent choices when filtering logic is complex and needs reuse across multiple components, though pipe purity settings require attention.
4. Consider Change Detection Strategy: For large lists, combining with OnPush change detection strategy can reduce unnecessary detection cycles.
5. Preprocess Data When Possible: Whenever feasible, perform filtering at the data layer to minimize logical decisions in templates.

By understanding these technical details and performance considerations, developers can more effectively handle conditional rendering scenarios in Angular, building web applications that are both functionally complete and performance-optimized.