Show or hide children components in Angular 10 - GeeksforGeeks

25 Jan, 2021
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
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Dropdown Component
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?