In our DiaryComponent application component, which renders a list of diary entries, we can notice that our component needs to know the details of the return value taken from the API, in which case the detail is returned in an attribute called item.
Let’s refactor the service to return just what the component needs already formatted, abstracting the structure of the API.
In the ExerciseSetsService service, we will refactor the following methods:
import { Observable,
map
} from ‘rxjs’;
export class ExerciseSetsService {
getInitialList(): Observable<ExerciseSetList> {
const headers = new HttpHeaders().set(‘X-TELEMETRY’, ‘true’);
return this.httpClient
.get<ExerciseSetListAPI>(this.url, { headers })
.pipe(map((api) => api?.items));
}
refreshList(): Observable<ExerciseSetList> {
return this.httpClient
.get<ExerciseSetListAPI>(this.url)
.pipe(map((api) => api?.items));
}
}
In the getInitialList and refreshList methods of the service, we are calling the pipe method of the Observable object. This method is fundamental to understanding RxJS since, through it, we can define which operators will act in the flow of information that the observable is enveloping.
The pipe method also returns an observable, and when the component calls the subscribe method, its result will go through all the operators and deliver the result. For our needs, we are using the map operator, which receives the data that the observable is processing and returns the other data that will be used by the next operator or, at the end, by the component that made the subscription.
In this case, the operator receives an object of the ExerciseSetListAPI type and we will return the item element that is contained in it to the component, which is of the ExerciseSetList type. With this change, VS Code, together with Angular’s Language Server (for more details on how to configure this, read Chapter 1, Starting Projects the Right Way), will point out errors in the diary.resolver.ts file. We will correct it as follows:
export const diaryResolver: ResolveFn<ExerciseSetList> = (route, state) => {
const exerciseSetsService = inject(ExerciseSetsService);
return exerciseSetsService.getInitialList();
};
As the service now returns journal entries and no longer the entire structure of the API return, we change the type that the function returns. Note that RxJS uses TypeScript to improve the developer’s experience.
In the DiaryRoutingModule module, let’s refactor the use of the resolver that we fixed:
const routes: Routes = [
{
path: ”,
children: [
{
path: ”,
component: DiaryComponent,
title: ‘Diary’,
resolve: { exerciseList: diaryResolver },
},
},
];
It is important to name your project variables as clearly as possible; in this case, we have changed the route attribute to exerciseList. What we need to do to finish this task is to refactor the DiaryComponent component:
export class DiaryComponent implements OnInit {
ngOnInit(): void {
this.route.data.subscribe(({ exerciseList }) => {
this.exerciseList = exerciseList;
});
}
newList() {
this.exerciseSetsService
.refreshList()
.subscribe((exerciseList) => (this.exerciseList = exerciseList));
}
}
With the use of the map operator in the service, now, in the component, we only pass the list of exercises, so the component does not need to know the implementation and the details of the API.
In the next section, we will see another way to subscribe.