Krishan Dev Personal Blog

 app.component.html:- <input type = "text"   placeholder = "Enter Item to Add in List" #task >     <br/><br/>     <button (click) = " addItem ( task . value ) " > Add Item </button>   <br/><br/>   <ul *ngFor = " let item of listItems " >     <li> {{ item . name }} </li>         <button (click) = " itemRemove ( item . id ) " > Remove </button>   </ul>   app.component.ts:- listItems : any []=[]; addItem ( item : string ) {   console . warn ( item );   this . listItems . push ({ id : this . listItems . length , name : item }); } itemRemove ( id : number ) { console . warn ( id ) this . listItems = this . listItems . filter ( item => item . id != id ) } Output:-

app.component.html:    <button (click) = " toggle () " > Toggle </button>   <h1 *ngIf = " display " > Toggle Button Content </h1> app.component.ts: display = true ; toggle () { this . display =! this . display ; }

  app.Component.html <form #basicForm = "ngForm" (ngSubmit) = " getFormData ( basicForm . value ) " >     <input type = "text" ngModel name = "userName" placeholder = "Enter You Name" /> <br/><br/>     <input type = "text" ngModel name = "email" placeholder = "Enter Your Email" /> <br/><br/>     <input type = "password" ngModel name = "password" placeholder = "Enter Password" /> <br/><br/>     <button> Submit </button>   </form>   <br/><br/>   <ul>     <li> {{ getFormDetails . userName }} </li>     <li> {{ getFormDetails . email }} </li>     <li> {{ getFormDetails . password }} </li>   </ul> app.component.ts: getFormDetails : any =[]; getFormData ( data : NgForm ) {   console . warn ( data ); this . getFormDetails = data ; }