Posts

Showing posts from September, 2022

Angular Input Change Event :

Image
  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

Image
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