Toggle a Div on Button Click Angular Example

Toggle a Div on Button Click Angular Example

In this post we will give you information about Toggle a Div on Button Click Angular Example. Hear we will give you detail about Toggle a Div on Button Click Angular ExampleAnd how to use it also give you demo for it if it is necessary.

I am going to share a simple example of angular toggle show hide div on button click event. you can learn how to toggle elements in angular 8 application. i will give you normal example of toggle div on button click event using ngIf and hidden.

You can easily use show hide toggle div on click event in angular 6, angular 7, angular 8 and angular 9 application.

In this example, i will give you two example of angular toggle element on click. one if using *ngIf and another is using [hidden]. we will create buttons with two methods. When you click on that function we will set true and false value in variable. Using that variable we will hide show our div or element.

You can see both example, let’s see how it works:

Example 1:

app.component.html

<h1>Toggle a Div on Button Click Angular Example - ItSolutionStuff.com</h1>

<button (click)=toggleDisplayDiv() >Toggle display Div</button>

<div [hidden]="isShowDiv">This is ItSolutionStuff.com Div.</div>

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'appComponent';

isShowDiv = false;

toggleDisplayDiv() {

this.isShowDiv = !this.isShowDiv;

}

}

Example 2:

app.component.html

<h1>Toggle a Div on Button Click Angular Example - ItSolutionStuff.com</h1>

<button (click)=toggleDisplayDivIf() >Toggle display Div If</button>

<div *ngIf="!isShowDivIf">This is ItSolutionStuff.com Div If.</div>

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'appComponent';

isShowDivIf = false;

toggleDisplayDivIf() {

this.isShowDivIf = !this.isShowDivIf;

}

}

Preview:

I hope it can help you…

Hope this code and post will helped you for implement Toggle a Div on Button Click Angular Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  74  =  82

We accept paid advance and paid guest Posting on our Site : Contact US