Data Input Using NgModel

Data input

Handling data input is an integral part of most web and mobile applications. Thanks to the Angular framework, we have several ways in which we can handle data input in our Ionic apps:

• Two-way data binding using NgModel
• FormBuilder
• Template-driven forms

Two-way data binding using NgModel

Angular’s NgModel directive allows us to implement a concept known as two-way data binding to form input fields in our templates.

Two-way data binding is a term used to describe the association between the value of a template input field and the value of a variable in the component class.

Using the NgModel directive, values can be set in both directions, hence the term “two-way data binding”.

For example, we can set a value for a variable bound to the template input field in the component class. We can then update the value of that variable by modifying the value in the template input field.

Creating a new project

Let’s make a start by exploring two-way data binding by creating a new Ionic app with the following command:

ionic start simple-form blank --type=angular

We won’t be adding any platforms or plugins here, just some straightforward code in our class and template files.

Templating the home page

In the simple-form/src/app/home/home.page.html template, we make the following amendments (highlighted):