Toggle a Div on Button Click Angular

In this section, we are going to learn how we can toggle a Div by clicking on a button. We will use Angular to do this. In our below example, we will learn the use of toggle elements. In our application, we are going to use ngIf and hidden to toggle div on an event of button click. In our Angular application, we can use various versions of Angular such as Angular 6, 7, 8, 9, 10, and 11, to show, use, and hide toggle div on click event.

In our section, we are going to explain two examples to learn about toggle elements on click. In our first example, we will use if with the *ngIf. In the second example, we will use if with [hidden]. We will use two methods so that we can create the button. When the function is clicked by us, it will be set as true, and the variable will be set to a false value. Our element or div can be shown or hidden by using the variable.

Example 1:

In our first example, we are going to use if with the *ngIf.

app.component.html

app.component.ts

Example 2:

In the second example, we are going to use if with [hidden].

app.component.html

app.component.ts

Now our above code is ready, and we can run it on our local. When we run this, the following output will be generated: