---
description: Angular uses two way data binding for input tags
---

# User Input with - \[(ngModel)]

## 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>.**&#x20;_&#x20;This is useful for login page, register pages, search bars and other forms that require user specific input.\


{% tabs %}
{% tab title="Setup" %}
{% code title="app.module.ts" %}
```typescript
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 { }
```
{% endcode %}

**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.&#x20;
{% endtab %}

{% tab title="Component" %}
Our component

{% code title="my-component.ts" %}
```typescript
Import { Component } from "@angular/core"; (

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

export class MyComponent {
  name = ""
}

```
{% endcode %}

**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.
{% endtab %}

{% tab title="Template" %}
Out template for the component

{% code title="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 }}
```
{% endcode %}

**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)]**
{% endtab %}

{% tab title="Result" %}
![Using Ngmodel](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LfBp_nF6XUKAy3j3zq-%2F-LfBplyyqpbNK_arRRBP%2FScreen%20Recording%202019-05-18%20at%2002.25.48.65%20PM.gif?alt=media\&token=cc56cab9-4bfa-4bce-aa71-4dd58a5ed36a)

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

{% embed url="https://www.youtube.com/watch?v=CacMOuzTiJU" %}

#### [\[(ngModel)\] Example](https://stackblitz.com/edit/angular-ngmodel-ssf?file=app%2Fapp.component.html)
