Open In App

Show or hide children components in Angular 10

Improve
Improve
Like Article
Like
Save
Share
Report

Prerequisites: Angular must be installed  

In this article, we will see how we can show or hide the child components in Angular.  

  • Lets start by creating a new project. Create a new folder and initialize a new angular project. Run the project to verify it is working.
ng new myProject
ng serve -o  
  • This will create a new project in the current directory. Now we can clear the app.component.html file and create a child component in order to demonstrate how we can show or hide it.
ng generate component comp1  
  • Now the setup part is over. Lets add this components in our app.component.html file:
<app-comp1></app-comp1>  
  • We will create a button to show and hide the component. Lets add the button code in app.component.html file.
<button type="button" (click)="showhideUtility()">
    {{buttonTitle}}
</button>  
  • Here showhideUtility() is a method and buttonTitle is a variable that we need to define in our app.component.ts file.

app.component.ts




import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
   export class AppComponent {
   title = 'myProject';
   buttonTitle:string = "Hide";
   showhideUtility(){
   }
}


  • Our child component is still blank so lets add some content. Go to comp1.component.html and add the following code:

comp1.component.html




<div>
   This is the Child Component
</div>


  • And add some css in comp1.component.css in order to get a nice view:
div{
height:200px;
width: 200px;
border: 2px lightblue solid;
border-radius: 10px;
background-color: lightgreen;
}
  • Now coming back to app.component.ts, add a new property ‘visible’ that will be a boolean variable to define the show/hide state. When user triggers the show hide method, it should flip the value of the ‘visible’ variable. So finally our app.component.ts will look like this:

app.component.ts




import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'myProject';
 buttonTitle:string = "Hide";
 visible:boolean = true;
 showhideUtility(){
   this.visible = this.visible?false:true;
   this.buttonTitle = this.visible?"Hide":"Show";
 }
}


  • Add a ngIf directive to comp1 to show or hide the component. So finally app.component.html looks like this:

app.component.html




<app-comp1 *ngIf="visible"></app-comp1>      
<button type="button" (click)="showhideutility()">{{buttonTitle}}</button>


  • Now save all the files and run the project using :
ng serve -o  

The project will run on http://localhost:4200 by default. You will the output like this:  

When Show button is Clicked

When Hide Button is Clicked



Last Updated : 25 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads