Return when subscribing. ... Type 'Subscription' is missing the following properties

You are trying to assign a Subscription into an array that is why you are getting these error:

I made this example using Observables and async pipe, I hope it helps you:

TS:

 /***
   *  books$ Observable is looking to any response
   *  of the method getByCategoryId. It is being displayed with async pipe in the view.
   */
  books$ = this.bookService.getByCategoryId(1);

  books: BookModel[];

  constructor(private bookService: BookService) { }

  ngOnInit() {
    this.getBooks();
  }

  /***
   *  Getbooks method does not return anything, 
   *  after the subscribe, a map is assigning the value to the books propertie
   *  which is in being render in the view without async pipe. 
   */
  getBooks(): void {
    this.bookService.getByCategoryId(1)
      .subscribe((payload: Payload<GetBooksResponse>) => {

        this.books = payload.result.map((response: GetBooksResponse) => {
          return <BookModel>{
            id: response.id,
            title: response.title
          };
        });

      });
  }

HTML:

<div *ngFor="let book of (books$ | async).result">
    {{ book | json }}
</div>

<br/>
<h3> Not Using | async </h3>

<div *ngFor="let book of books">
  {{ book | json }}
</div>

Try online at this link: https://stackblitz.com/edit/angular-k9pzmw

If you ask me which approach is better, I would say it depends.

Async pipe with observable is my favorite to only show 'dumb data' in the view, but you should keep the subscription solution if you need this information in the component for anything else.

You need to return

getBooks(): Observable<BookModole[]> { ... }

then:

this.getBooks().subscribe(res => { this.books = res; });