Angular 6: How to use an array in template syntax with ngFor?

Question

I have two arrays: books and booksDisplay. In my template I use *ngFor to iterate through my booksDisplay array:

<div *ngFor="let bookDisplay of booksDisplay">
   <div class="book">
      <div class="title" *ngIf="???">{{ ???.title }}
   </div>
</div>

But inside my *ngFor-Element I need to look up in my books-Array, where id is equal to the current bookId in my booksDisplay-Array. So how can I use something like a where clause inside my *ngFor-Element?

Answer 1

Something like this should work. However, I would better prepare data in a model instead of making such calculations in the template..

<div *ngFor="let bookDisplay of booksDisplay>
   <div class="book">
      <ng-container *ngIf="checkIfExist(bookDisplay.id)">
        <div class="title">{{ books[bookDisplay.id] }}
      </ng-container>
   </div>
</div>

Template:

checkIfExist(id: number) {
  return this.books.find( book => book['id'] === id ) 
}