Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Reviewing the login form template and component

A very good example to understand template-driven forms is the login form. Let's see login.component.html and login.component.ts:

1. Open ./Client/src/app/pages/auth/login/login.component.html and review the template input tags:

 [(ngModel)]="user.email"  name="email"
 [(ngModel)]="user.password" name="password"

Note that we are using the two-way data binding syntax for ngModel = [(ngModel)]. This means that we can set the initial data from the login component class, but we can also update it.

Remember, Angular's ngModel can be used in three different ways:

• ngModel: No binding or value is assigned, and depends on the name attribute
• [ngModel]: One-way data binding syntax
• [(ngModel)]: Two-way data ...