Dynamic Element Visibility in Angular: Using Directives for Show/Hide Logic

Introduction

In web applications built with Angular, dynamically showing or hiding elements based on certain conditions is a common requirement. Angular offers powerful directives to handle these tasks efficiently. This tutorial explores how to manage element visibility using Angular’s structural and attribute directives: *ngIf, [hidden], and custom directives.

Understanding Structural and Attribute Directives

The *ngIf Directive

The *ngIf directive is a structural directive in Angular that conditionally adds or removes elements from the DOM based on an expression. When the expression evaluates to true, the element is added; when false, it is removed. This can be particularly useful for controlling visibility where removal and recreation of elements are necessary.

Example:

<div *ngIf="isVisible" class="alert alert-success">
  <strong>List Saved!</strong> Your changes have been saved.
</div>

The [hidden] Attribute Directive

The [hidden] directive is an attribute directive that controls the visibility by toggling the CSS display: none; property. Unlike *ngIf, elements with [hidden] remain in the DOM but are not visible.

Example:

<div [hidden]="!isVisible" class="alert alert-success">
  <strong>List Saved!</strong> Your changes have been saved.
</div>

Implementing Visibility Logic

Using *ngIf for Conditional Rendering

Consider a scenario where you want to display a success message after saving data. You can use *ngIf to show the message and automatically remove it from the DOM when it’s no longer needed.

export class AppComponent {
  isVisible = false;

  saveData() {
    this.isVisible = true;
    setTimeout(() => {
      this.isVisible = false;
    }, 3000);
  }
}

In your template:

<button (click)="saveData()">Save</button>
<div *ngIf="isVisible" class="alert alert-success">
  <strong>List Saved!</strong> Your changes have been saved.
</div>

Handling Context in Asynchronous Operations

When using setTimeout within an Angular component, the context (this) may not refer to the component instance. Use .bind(this) or arrow functions to maintain the correct reference.

Example:

saveData() {
  this.isVisible = true;
  setTimeout(() => {
    this.isVisible = false;
  }, 3000);
}

Using [hidden] for Toggling Visibility

If you need to keep the element in the DOM but hide it temporarily, [hidden] is more appropriate.

export class AppComponent {
  isVisible = false;

  saveData() {
    this.isVisible = true;
    setTimeout(() => {
      this.isVisible = false;
    }, 3000);
  }
}

In your template:

<button (click)="saveData()">Save</button>
<div [hidden]="!isVisible" class="alert alert-success">
  <strong>List Saved!</strong> Your changes have been saved.
</div>

Creating Custom Directives for Enhanced Functionality

For more complex scenarios, such as automatically removing an element after a delay, you can create custom directives.

Example: RemoveAfter Directive

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[removeAfter]'
})
export class RemoveAfter implements OnInit {
  @Input() removeAfter: number;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    setTimeout(() => {
      this.elementRef.nativeElement.remove();
    }, this.removeAfter);
  }
}

Usage in the template:

<div [removeAfter]="3000">Removed after 3 seconds</div>

Conclusion

Angular provides multiple ways to control element visibility, each suited for different use cases. By understanding and leveraging *ngIf, [hidden], and custom directives, you can effectively manage dynamic content in your Angular applications.

Remember to choose the right approach based on whether you need to keep elements in the DOM or allow them to be removed entirely. This ensures optimal performance and user experience in your web applications.