Alternative Methods for Conditional Visibility in Angular 2+

Understanding ngShow and ngHide in Angular 1.x

In Angular 1.x, ngShow and ngHide were directives that conditionally displayed or hid elements based on the truthiness of an expression.

• ngShow: If the expression evaluates to true, the element is displayed. Otherwise, it's hidden.

Equivalents in Angular 2+ and Beyond

In Angular 2+ and later versions, the concept of conditional visibility is handled using a combination of property binding and the *ngIf directive.

Property Binding:

• Bind a Boolean value to the hidden property of an element.
• The element will be hidden if the value is true; otherwise, it will be visible.

Example:

<div [hidden]="condition">This element will be hidden if condition is true</div>

*ngIf Directive:

• The *ngIf directive conditionally creates or destroys an element based on the truthiness of an expression.

<div *ngIf="condition">This element will be created only if condition is true</div>

Choosing the Right Approach

• Property Binding: Use this when you want to conditionally show or hide an element, but you don't want to create or destroy it.
• *ngIf Directive: Use this when you want to conditionally create or destroy an element, which can be more efficient in some cases.

Usage in Angular, Angular Components, and Angular Templates

These methods can be used in any Angular component or template, regardless of its complexity. Here's a breakdown of how they might be applied in different contexts:

• Basic Angular Components: Use property binding or *ngIf directly within the component's template.
• Complex Angular Components: Consider using a service or a component-specific directive to encapsulate the conditional logic and make it reusable.
• Angular Templates: Apply property binding or *ngIf to elements within your templates to control their visibility based on data or user interactions.

Additional Considerations

• Performance: For performance-critical scenarios, consider using *ngIf to avoid unnecessary DOM manipulations when elements are repeatedly shown or hidden.
• Accessibility: Ensure that conditional visibility is implemented in a way that is accessible to users with disabilities. Use appropriate ARIA attributes and techniques to provide alternative text or descriptions for hidden elements.
• Styling: If you need to apply specific styles to hidden elements, you can use CSS to target them based on their hidden attribute.

<div [hidden]="showElement">
  This element will be hidden if showElement is true.
</div>

In this example, showElement is a Boolean variable in your component's TypeScript class. If showElement is true, the div element will be hidden. If it's false, the element will be visible.

<div *ngIf="showElement">
  This element will be created only if showElement is true.
</div>

Here, showElement is again a Boolean variable. If showElement is true, the div element will be created and rendered in the DOM. If it's false, the element will be removed from the DOM.

• Property Binding: Use this when you want to conditionally show or hide an element, but you don't want to create or destroy it. This is often more efficient for elements that are frequently shown or hidden.
• *ngIf Directive: Use this when you want to conditionally create or destroy an element, which can be more efficient in some cases, especially when the element is complex or expensive to render.

Alternative Methods for Conditional Visibility in Angular 2+

While *ngIf and property binding are the primary methods for conditional visibility in Angular 2+, there are a few other alternatives that you might consider depending on your specific use case:

Structural Directives:

• *ngFor with trackBy: If you're iterating over an array and want to conditionally show or hide items based on a property, you can use *ngFor with a trackBy function. This function can be used to identify unique items in the array, allowing you to conditionally render them based on a specific property.

<div *ngFor="let item of items; trackBy: trackById">
  <div *ngIf="item.isVisible">{{ item.name }}</div>
</div>

• *ngSwitch: If you need to conditionally render different content based on a single expression, you can use *ngSwitch with *ngSwitchCase and *ngSwitchDefault.

<div [ngSwitch]="selectedOption">
  <div *ngSwitchCase="'option1'">Option 1</div>
  <div *ngSwitchCase="'option2'">Option 2</div>
  <div *ngSwitchDefault>Default</div>
</div>

Custom Directives:

• Create a custom directive to encapsulate conditional logic and make it reusable across your application. You can use this approach for complex conditional rendering scenarios or when you need to share logic between multiple components.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appConditionalVisibility]'
})
export class ConditionalVisibilityDirective {
  @Input() appConditionalVisibility: boolean;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  ngOnChanges() {
    if (this.appConditionalVisibility) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

<div *appConditionalVisibility="showElement">
  This element will be shown or hidden based on showElement.
</div>

CSS Classes:

• For simple cases, you can conditionally add or remove CSS classes to elements using property binding. This allows you to control visibility or other styles based on a Boolean expression.

<div [class.hidden]="showElement">
  This element will be hidden if showElement is true.
</div>