Learn TypeScript 3 by Building Web Applications

Improving the book creation component

Let's improve the book creation component (that is, src/app/book/components/book-new).

To do so, we will not only leverage the matInput directive and mat-form-field, but also mat-select and mat-option.

Before we move on, let's do a small change to the controller. Adapt its constructor as follows:

constructor(private formBuilder: FormBuilder) { } 

For this code to compile, you'll of course also need to add the corresponding import statements:

import { FormBuilder } from '@angular/forms';

Next, adapt the ngOnInit function, like this:

ngOnInit() { ... this.formGroup = this.formBuilder.group({ name: ['', Validators.required], author: ['', Validators.required], genre: ['', Validators.required], numberOfPages: ...