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.

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.

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.

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)]

[(ngModel)] Example

PreviousData Binding Challenge NextLogin Page Challenge

Last updated 6 years ago

hashtagAngular 2 way data-binding

hashtag[(ngModel)] Examplearrow-up-right

Angular 2 way data-binding

[(ngModel)] Example