How to dynamically render elements/content/components in angular

 You can dynamically render elements or content or components using ngIf in angular.

 

What is ngIf in Angular?

The ngIf Directive in Angular10 is used to remove or recreate a portion of an HTML element based on an expression. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.

 

In the following example, a button component is used to dynamically render an input textbox and a paragraph tag.

 

Example : https://stackblitz.com/edit/angular-ivy-vuls2v?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.css

[app.component.html]

<div class="button">   <button (click)="NgIf()">What is NgIf inangular</button>   <button (click)="TextBox()">Show TextBox</button> </div> <div class="content_div">   <div *ngIf="condition">     <label>TextBox</label>     <input id="textbox" value="Subscribe for more" />   </div>   <div *ngIf="!condition">     <p>       In this video, we are going to see what is NgIf in Angular 10 and how to       use it.     </p>   </div> </div>

 

[app.component.ts]

import { Component, VERSION } from '@angular/core';   @Component({   selector: 'my-app',   templateUrl: './app.component.html',   styleUrls: [ './app.component.css' ] }) export class AppComponent  {   public condition = false;   public TextBox(){     this.condition = true;   }   public NgIf(){     this.condition = false;   } }

 

For More information : https://angular.io/api/common/NgIf