CodeLSC

Angular's  <ng-template>  element defines a template that is not rendered by default.   Description : With  <ng-template> , you can define template content that is only being rendered by Angular when you, whether directly or indirectly, specifically instruct it to do so, allowing you to have full control over how and when the content is displayed. Note that if you wrap content inside an  <ng-template>  without instructing Angular to render it, such content will not appear on a page. For example, see the following HTML code, when handling it Angular won't render the middle "Hip!" in the phrase "Hip! Hip! Hooray!" because of the surrounding  <ng-template> . <p> Hip! </p> <ng-template>   <p> Hip! </p> </ng-template> <p> Hooray! </p>   You must utilise ng-template combined with structural derivatives like ngIf , ngFor , and ngSwitch in order to render the items inside the template.

The keyup event occurs when the user releases a key (on the keyboard). (keyup)  is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls.  When a user  presses and releases a key, the (keyup) event occurs.  For using in text-based input controls it is generally used to get values after every keystroke. [app.component.html] <div   class = "content" >    <p> Entered values :  {{ this.values }} </p>    <p> KeyCode :  {{ this.keycode }} </p>    <p> Key :  {{ this.key }} </p>    <input   id = "textbox"   #TB   placeholder = "Enter any key"   (keyup) = "onKey($event)"   /> </div>   [app.component.ts] export   class   AppComponent  {    values  =  '' ;    keycode  =  '' ;    key  =  '' ;    onKey ( event :  any

 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