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.

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.

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.

Previous - Angular 4 Error: Can’t Bind to ngModel since it isn’t a known property of selectNext - How to Upload Multiple Files in Angular 4 using Asp.Net Web API in MVC 4



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

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!