Anil Singh | Code-sample.com

In this Article, we will see “How Angular 5/4 forms are used or create?”   There are basically two types of Angular forms ü   Template driven form ü   Model driven forms And In this section, I will discuss about template driven form. The following Example - app.module.ts - import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { RouterModule } from '@angular/router' ; import { HttpModule } from '@angular/http' ; import { FormsModule } from '@angular/forms' ; import { DateServiceService }  from '../app/date-service.service' ; import { AppComponent } from './app.component' ; import { UserComponent } from './user/user.component' ; import { BillComponent } from './bill/bill.component' ; import { BillService }  from '../app/bill.service' ; @ NgModule ({   declarations: [     AppCompon...

What Is Property Binding? Property binding allows you to define an element attribute values from the component and its one-way data binding and also you can only set the data from the component to the view. Example As – Parent Component class Is - import { Component , Input } from '@angular/core' ; @ Component ({   selector: 'parent-Component' ,   template: 'Its Comes from parent: {{InputTextUser}}' }) export class ParentComponent {   @ Input () InputTextUser ; } And The Child Component Class Is - import { Component } from '@angular/core' ; @ Component ({   moduleId: module . UserId ,   selector: 'child-Component' ,   template: `       <parent-Component [InputTextUser]="txtUser"></parent-Component>       <span [InputTextUser]="txtUser"></span>   ` }) export class ChildComponent {   txtUser = 'Anil' ; ...

In an event binding , Angular sets up an event handler for the target event. Example looks like - import { Component , OnInit } from '@angular/core' ; @ Component ({   selector: 'on-click' ,   template: `<div>         <div><button (click)="onClick($event)"> keyup here.</button> <p>{{message}}</p></div>         <div><input (keyup)="onKey($event)"> <p>{{values}}</p></div>  </div>` }) export class clickComponent {   values = '' ;   onClick ( event ) {     console . log ( event );   }   onKey ( event : any ) {     //without type info     this . values += event . target . value + ' | ' ;   } } Example 2 – dblclick keypress import  {  Component ,  OnInit  }  from   '@angul...