Posts

Showing posts with the label angular for beginners

How to dynamically render elements/content/components in angular

Image
 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" &g