Search⌘ K
Home
Courses
Directives and Pipes in Angular

Solution: The Built-in `NgModel` Directive

Explore how to use Angular's built-in NgModel directive to implement both two-way and one-way data binding in form inputs. This lesson helps you understand binding syntax and how to manage data flow between the component and the view efficiently.

We'll cover the following...

Solution

Here’s an example of how the solution for this task may look:

<section>
  <p>Name:</p>
  <input type="text" [(ngModel)]="name">

  <p>E-mail:</p>
  <input type="email" [ngModel]="email" (ngModelChange)="onEmailChange($event)">

  <p>Agreement:</p>
  <input type="checkbox" [(ngModel)]="agreement">

  <hr>
  <button (click)="onSave()">Save</button>
</section>
The solution for the task

Solution explained

This solution uses the following two ways ...