How to Show Hide or Toggle Elements in Angular

I am sharing a simple example here in this post showing how to toggle or show and hide elements in Angular. Let us assume I have a <div> element, which has few other elements like textbox and buttons. I wish to show and hide the elements with the click of a button.

show hide or toggle elements in Angular

In this example, I am using the *ngIf directive in Angular to toggle or show and hide elements. The ngIf will add or remove an element from the DOM, based on a condition such as "true" or "false".

👉 How to implement a simple AutoComplete feature in Angular with Dynamic data using Web API

Here’s how I do it. I have a button control in my application’s template along with a <div> element that has few other elements like textbox and labels. Its like a form. All I want is to show the elements whenever necessary and hide when not required.

The Template

<button (click)="toggle()" id="bt">
    {{buttonName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>

The button’s click event calls a method called toggle(), which I have written inside the app.component.ts file. The method updates a variable that will create the toggle effect.

The *ngIf directive has a Boolean variable named show, which is set to true or false inside the component’s method. Based on the condition, it will show or hide elements inside the container.

The Application Component

Open the app.components.ts file, copy the code and paste it in the file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // Change the name of the button.
    if(this.show)  
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}

I have defined two properties named show and buttonName. The first property is Boolean property, which I have bind to the ngIf directive in my applications template.

👉 How to perform CRUD operations in Angular using Web API.

The second property (optional) is buttonName of type any. It has a default value as Show. I also wish to change the name of the button for every click. That is, it should show the name as Show when the elements are hidden and change to Hide when the elements are visible.

← PreviousNext →