Adapter pattern with Angular and Http request

Based on this article : https://blog.florimond.dev/consuming-apis-in-angular-the-model-adapter-pattern

I'm trying to adapt to my current code.

In the article :

   export interface Adapter<T> {
    adapt(item: any): T;
}

----------------------------

@Injectable({
    providedIn: 'root'
})
export class CourseAdapter implements Adapter<Course> {

  adapt(item: any): Course {
    return new Course(
      item.id,
      item.code,
      item.name,
      new Date(item.created),
    );
  }
}

----------------------------
export class CourseService {

  private baseUrl = 'http://api.myapp.com/courses';

  constructor(
    private http: HttpClient,
    private adapter: CourseAdapter,
  ) { }

  list(): Observable<Course[]> {
    const url = `${this.baseUrl}/`;
    return this.http.get(url).pipe(
      // Adapt each item in the raw data array
      map((data: any[]) => data.map(item => this.adapter.adapt(item))),
    );
  }
}
----------------------------

But me I don't use Observable, I tried to adapt this request but I don't find the solution

In the service :

 list(){   

    const url = `${this.baseUrl}/`;
    return this.http.get<CourseModel>(url);

  }

In the component :
  this.courseService.list().subscribe((data) => {
      console.log(data);
    });