How to Show Hide or Toggle Elements in Angular 4

I am sharing a simple example here in this post showing how to toggle or show and hide elements in Angular 4. 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 4

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

Must Read: How to Implement AutoComplete feature in Angular 6 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">

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

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.

Also Read: How to Set or Assign Label Text Dynamically on Button Click in Angular 4

The Application Component

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

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

  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.buttonName = "Hide";
      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.

You may also like: How to show/hide or toggle a DIV element based on Dropdown List selection using JavaScript or jQuery

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.

That’s it.

← PreviousNext →

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: