Displaying Returned Data

The search feature of the photo gallery project

Open search-header.component.ts that was generated for you earlier, along with its template search-header.component.html. In the template, you can see that the input element has a [FormControl] attribute. You’ll learn more about FormControl and the related services in Building Reactive Forms.

FormControl

For now, all we need to know is that it’s an observable that emits the current value of the search bar whenever the value of the input element changes.

Your first task is to connect the input element to the component. We’ll import the FormControl class from @angular/forms and add the following property declaration to your header component.

Connecting input to components