Angular 4 Toggle Hide Show on Button click

Angular 4 Toggle Hide Show on Button click

In this Post We Will Explain About is Angular 4 Toggle Hide Show on Button click With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular 4 Toggle Hide/Show on click Button Example

In this post we will show you Best way to implement angular4 – How hide and show in angular 4.0, hear for How To Toggle Between Hiding And Showing an Element with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Angular 4 Tutorial for beginners - Angular 4 Introduction




The HTML Template

In How to Show HTML Tags and Hide HTML tags or Toggle Elements in Angular 4 Example

<h2>Step By Step - Show Hide or Toggle Elements using Angular 4 ?</h2>
<button (click)="toggle()" id="bt">
    {{mybtnName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: center;">
        <div>
            <label>User Name:</label>
            <div><input id="tbname" name="userfname" /></div>
        </div>
        <div>
            <label>User Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Your Details (optional):</label>
            <div><textarea rows="6" cols="45"></textarea></div>
        </div>
    </div>
</ng-container>

The button’s trigger event calls a functions called simple javascript toggle(), which We have written inside the app.component.ts file. The function updates a variable that will make the toggle annimation effect.

Also Read :   JSON - Introduction using PHP-Angularjs -javascript

The *ngIf directive has a Boolean variable named show, which is set to true or false inside the component’s function. Generally on the if else condition, it will Display or Remove HTML elements inside the Web container.

The Application Component

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

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

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

  //init base
  ngOnInit () {  }

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

    //Angular some CHANGE THE NAME OF THE your BUTTON.
    if(this.show)  
      this.mybtnName = "Hide"; //remove
    else
      this.mybtnName = "Show"; //display
  }
}

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   AngularJS Nested ng-repeat Get Multiple checkbox value





Example

I hope you have Got What is Show/Hide on click with Angular 4 And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.