User Input with - [(ngModel)]

Angular uses two way data binding for input tags

Angular 2 way data-binding

In angular in order to accept user input we need to use two-way data binding, between the HTML and Component. We use [(ngModel)] to bind a value from the <input>. This is useful for login page, register pages, search bars and other forms that require user specific input.

Setup

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Line 3: Import FormsModule from angular/forms. This is needed to use [(ngModel)]. Line 8: Add FormsModule to the imports array, all modules go in this array.

Component

Our component

my-component.ts

Import { Component } from "@angular/core"; (

@Component({
  selector: "my-component",
  templateURL: './my.component.html'.
  styles: [['h1 { font-weight: normal; }']]   
})

export class MyComponent {
  name = ""
}

Line 10: the name property the above component is going to store the value from the user <input>, however right now it is just an empty string.

Template

Out template for the component

my.component.html

<input [(ngModel]="name" >

<!--  To diplay the value of name, not need but for learning purposes -->
<p> This the value of name: {{ name }}

Line 1: Notice the name in quotes, that is referring to the name on the component in my.component.html. This is how you receive information from the user with angular's two way data binding. Line 4: Using {{ name }} to display the value, this is just to demonstrate name is being updated when the user types and is not need for accepting user input with [(ngModel)]

Result

Using Ngmodel

The bottom text is mirroring the user input using interpolation, {{ name }}, this way you can see the value of the two-way bound property.

[(ngModel)] Example