Dealing with Angular pipes, forms, and validation

In this section, we will see how to create a simple search component inside the bike list page using the new pipe feature. We will also look at how to create Angular forms in two ways: with template-driven forms, and with reactive forms. Finally, we will show you how to use form validation with Bootstrap CSS.

Creating a pipe filter

Pipes in Angular are a simple way to filter and transform data, very similar to the old AngularJS filter. We have some default pipes in Angular (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe), and we can also create our own pipes.

To create a custom pipe, we can use the Angular CLI to generate the scaffolding for us. Let's see how it works:

1. Open your Terminal window, and, inside ./Client/src/app, type the following command:

 ng g pipe pages/bikes/_pipes/bikeSearch

As always, Angular CLI takes care of creating the file and the appropriate imports.

2. Open ./Client/src/app/pages/bikes/_pipes/bike-search...