Displaying Returned Data

Now that a method is making an AJAX call, let's build out the components to put that data on the page.

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.


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

Get hands-on with 1200+ tech skills courses.