How to Show or Hide an Element in Angular?

To show or hide an element in Angular, you can use the *ngIf directive. The *ngIf directive in Angular is a structural directive that is used to conditionally render elements on a page.

By providing a condition in the *ngIf directive, you can show or hide an element from the page.

It is used in the following form:

<div *ngIf="condition">
  <!-- Your stuff -->
</div>

In this syntax, condition is a boolean expression that is evaluated by Angular.

If the expression evaluates to a truthy value, then the element is displayed(added to DOM) on the page. If the expression evaluates to a falsy value, then the element is removed from the DOM and hence it becomes hidden from the page.

That’s how you can show or hide an element with the *ngIf directive.

For example, let’s say we have a <div> element in our template which has some other elements inside of it. We want to show or hide this <div> based on the button click.

<h2>Show or Hide an Element</h2>
<button (click)="showDiv()">Show </button>
<button (click)="hideDiv()">Hide</button>

<div *ngIf="isVisible">
  <p>This is some random paragraph inside the div.</p>
  <a href="#">This is hyperlink</a>
</div>

To show or hide the <div>, we have used a variable isVisible with the *ngIf directive.

The <div> will be removed from the page if the value of the isVisible variable becomes false, otherwise, it will be displayed on the page.

To show or hide the <div> we are manually changing the value of isVisible from true to false on the button click.

For example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  // Keep the div displayed by default
  isVisible: boolean = true;

  showDiv(){
    this.isVisible = true;   // Show the div
  }

  hideDiv(){
    this.isVisible = false;  //  Hide the div
  }

}

Output:

Please note that the *ngIf directive removes the element from the DOM itself when the condition evaluates to false.

Therefore other elements on the page shift or move to fill the space left by the removed element.

2. Using the [hidden] Attribute Directive to Show or Hide an Element

Since the *ngIf directive adds or removes elements from the DOM based on the value of the expression passed to it.

Therefore, your application might sometimes perform slower because adding and removing elements from the DOM is a costly operation.

However, it depends on the size of the component where you are using the *ngIf directive.

Alternatively, you can use the [hidden] attribute directive to show or hide the elements.

But, like the *ngIf directive, the [hidden] directive does not add or remove the elements from the DOM, instead, it just shows or hides them from the page.

If the value of the expression passed to the [hidden] directive evaluates to a truthy value, the element is hidden from the page, and if the expression evaluates to a falsy value, the element is displayed back on the page.

Let’s try to implement the previous example with the [hidden] directive:

<h2>Show or Hide an Element with [hidden]</h2>
<button (click)="showDiv()">Show </button>
<button (click)="hideDiv()">Hide</button>

<div [hidden]="isHidden">
  <p>This is some random paragraph inside the div.</p>
  <a href="#">This is hyperlink</a>
</div>

Add logic to the ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  // Keep the div displayed by default
  isHidden: boolean = false;

  showDiv(){
    this.isHidden = false;   // Show the div
  }

  hideDiv(){
    this.isHidden = true;  //  Hide the div
  }

}

Output:

Conclusion

In this article, we learned two ways to show or hide elements in Angular.

The most preferred way to show or hide elements in Angular is to use the *ngIf structural directive. The *ngIf directive shows or hides elements by adding or removing them from the DOM.

You can also use the [hidden] attribute directive to show or hide elements. But the [hidden] directive does not add or remove the elements from the DOM to show or hide them.

It instead shows or hides the elements from the page without adding or removing them from the DOM.

You can use either of the two methods that best suits your requirements.

Thanks for reading!