JIYIK CN >

We will walk through examples of showing and hiding components or elements in Angular.

Showing and hiding in Angular

While developing business applications we need to hide some data based on user roles or conditions. We have to display the same data based on the conditions in this application.

In this tutorial, I will show you a simple method using which we can show and hide data based on conditions.

Let us create a new application using the following command.

# angular
ng new my-app

After creating our new application in Angular, we will go to our application directory using this command.

# angular
cd my-app

Now, let's run our application to check if all dependencies are installed correctly.

# angular
ng serve --open

Suppose we have a template or a piece of code that we want to show only when a condition is true and hide it when it is false. We can show and hide it using this example.

First, we'll app.component.htmlcreate a demo content with a title, paragraph, and input field in and wrap it in div.

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Now, app.component.tsin , we create a new variable elementand set it to false.

# Angular
element = false;

We will use *ngIfshow and hide ours based on the condition div.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

As shown in the example above, we set a condition that if elementis true, then it will be displayed div, and if the condition is false, then it will not be displayed.

Therefore, divwill be hidden because we have elementset to false. Now, let's elementchange the value of to trueand check how it works.

Output:

You can see now that when we change elementthe value of , the condition we divset on changes and it starts showing divand all the elements inside it.

Imagine if we wanted to show and hide data when certain buttons are clicked. We can *ngIfcreate this simple example using the same .

Now, let's create two buttons with two functions showData()and . We need to create these two buttons outside of so that they are not hidden when the condition changes to .hideData()divfalse

Therefore, our app.component.htmlcode in will look like this.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

Now, let's app.component.tscreate these two functions in . showData()Change elementthe value of to trueand change the value of hideData()to .elementfalse

So the code will look like this.

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

We will now add some CSS code to make our button look nice.

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

Let’s see how it works.

Output:

As you can see in the examples above, we can easily hide and show content using *ngIfthe and button methods.(click)

We can use the same concept on buttons as well if we want to hide the button when the content is hidden Display Dataand hide the button when the data is hidden .Hide Data

So we create a *ngIfcondition, if elementis true, then only the Hide Data button will be displayed, and when elementis false, then the Show Data button will be displayed.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

We don't need app.component.tsto write any line of code in the ./config file because the functions we created and *ngIfthe ./config function will help us to do the same thing on our buttons. So, let's check the result of how it works now.

Output:

So, in this tutorial, we have learned how to use to *ngIfhide and show content based on conditions, and we have also learned how to use (click)the method of a button to help us hide and show data on a button click.