CodeLSC

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

  Angular Change Event : The (change) is a DOM event fires when changes to the form fields like <input> , <select> , and <textarea> are committed by the user.   Video  tutorial  :   https://youtu.be/qou1SDN_m2Y  This Event Fires When : ·        user changes the input & moves the focus away from the text box (blur event) ·        On <select> it fires when the user selects a new option either by a mouse click or using a keyboard. ·         Fires when the state of a check box or radio button change due to users action   Change Event Example : The following example shows how to use the change event in Angular. [app.component.html] <label> Enter a Text  </label> <input   class = "textInput"   type = "text"   (change) = "changeHandler($event)"   />   [app.component.ts] export   class   AppComponent  {    changeHandler ( args ) {      console . log ( ar

Learn how to add and remove a class name to an element with angular   We can able to add and remove a class to an element in angular. In the following example, we have added/removed a class for the input element using a button component.   Example :   Video  tutorial :   https://youtu.be/vMM05geNQJ4   [app.component.html] <input   class = "myInput"   type = "text"   value = "subscribe for more videos"   /> <br   /> <button   (click) = "addClass()"   class = "button" > Add Class </button> <button   (click) = "romveClass()"   class = "button" > Remove Class </button>   [app.component.css] .myInput  {    font-weight :  bold ; } .inputStyle  {    width :  300px ;    color :  coral ;    border-radius :  5px ;    height :  25px ;    padding :  3px ; } .button  {    color :  aliceblue ;    backgrou

  HTML DOM Document addEventListener()   The addEventListener() method  allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.   Example : Video  tutorial :  https://youtu.be/80yHjjWJeC4 [index.html] <input   id = "inputElement"   type = "text"   value = "Example" /> <button   id = "buttonElement" > Update </button>   [script.js] document . getElementById ( 'buttonElement' ). addEventListener ( 'click' , function (){    var   InputEle  =  document . getElementById ( 'inputElement' );    InputEle . value  =  'subscribe for more videos' ; });   Sample : https://stackblitz.com/edit/js-qghp6q?file=index.html&file=index.js