Another way to subscribe – the async pipe

To demonstrate the versatility of RxJS in an Angular application, we will perform the task of adding a search for exercises in our backend to the diary entry inclusion form.

Following the good practices of an Angular application, we will create an interface that will represent the exercises. From the command line of the operating system, we will use the Angular CLI:

ng g interface diary/interfaces/exercise

In the file generated by the Angular CLI, we define the structure of the API return:

export interface Exercise {
  id?: string;
  description: string;
}
export type ExerciseList = Array<Exercise>;
export interface ExerciseListAPI {
  hasNext: boolean;
  items: ExerciseList;
}

We are using interfaces to define the return of the API and a type to define a list of exercises. The next step is to create the service that will fetch this information, again using the Angular CLI:

...