Hands-On Full-Stack Web Development with ASP.NET Core

Using Angular's ngModel directive

Once the forms module is imported, you can start using Angular's template-driven features, and, specifically, the extremely useful ngModel directive.

ngModel is an extensible directive that includes built-in support for two-way binding between component fields or properties and standard form elements.

Let's use ngModel in ProductFormComponent:

1. Create a new model at src/app/model/new-product.ts:

export interface NewProduct {  title: string;  description: string;  category: string;}

2. Re-export the new model as part of the src/app/model/index.ts file:

…export * from './new-product';

3. In ProductFormComponent, initialize a new product as a field in the component:

…import { Category, NewProduct } from '../../../model'; ...