Multiple Div's hide and show in angular

Multiple Div's hide and show in angular2, 4, 5 & 6

app.component.html
-------------------------

<h1> Hide and Show Function in angular 4 </h1>

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

<button (click)="toggle2()">{{buttonName2}}</button>


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


<ng-container *ngIf="show2">
  <div>
    <label>Name2:</label>
    <input id="tbname" name="yourname" placeholder="Enter Name" />
  </div>
  <div>
    <label>Email Address2:</label>
    <br>
    <input name="email" id="email" placeholder="Enter Email ID"/>
  </div>
  <div>
    <label>Additional Information (optional):</label>
    <br>
    <textarea rows="5" cols="46" style="float: left;" placeholder="Enter Comments"></textarea>
  </div>
</ng-container>


app.component.ts
----------------------

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';

  public show2:boolean = false;
  public buttonName2:any = 'Show2';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;
    this.show2=false;
    this.buttonName2="Show2"

    // CHANGE THE NAME OF THE BUTTON.
   
    if(this.show) 
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }

  toggle2() {
    this.show2 = !this.show2;
    this.show=false;
    this.buttonName="Show"

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show2) 
      this.buttonName2 = "Hide2";
    else
      this.buttonName2 = "Show2";
  }

}