> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled/user-input-with-ngmodel.md).

# 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.<br>

{% 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](/files/-LfBplyyqpbNK_arRRBP)

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)