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?

You could create a dictionary/lookup property in your component where the key is the book id and reference that inside the *ngFor block. Or you can join the 2 arrays into one array and iterate over that. — Igor
– Igor, Commented Jul 20, 2018 at 14:02
In my opinion, you should use method in the component.ts to filter those books then look up those books in the UI. Let the UI do the simple render will increase your performance. — Ryan Huang
– Ryan Huang, Commented Jul 20, 2018 at 14:05
could you please set an example in stackblitz.com/edit/angular-xcgx1h — Abolfazl Roshanzamir
– Abolfazl Roshanzamir, Commented Jul 20, 2018 at 14:18

Julius Dzidzevičius · Accepted Answer · 2018-07-20 14:29:05Z

2

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 ) 
}

edited Jul 20, 2018 at 14:29

answered Jul 20, 2018 at 14:24

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Callat · Accepted Answer · 2018-07-20 14:10:00Z

0

Assuming your component.ts looks something like this:

export class AppComponent {
   booksDisplay = [
    {
      id: 1,
      title: 'a'
    },
    {
      id: 2,
      title: 'b'
    },
    {
      id: 3,
      title: 'c'
    },
  ]
}

You can a counter to ngFor and use that value to filter on with ngIf conditional like so:

<div *ngFor="let book of booksDisplay; let i= index">
  <div class="book">
    <div class="title" *ngIf="i === book.id">{{ book.title }}
    </div>
    <p>{{i}}</p>
  </div>

answered Jul 20, 2018 at 14:10

Callat

3,0845 gold badges35 silver badges50 bronze badges

2 Comments

Sebastian S Over a year ago

Thanks. But it does not work for me because the index isn't the book id. One book has more than one element in the booksDisplay array.... Is there another way to solve this?

Callat Over a year ago

I feel like I'm misunderstanding your question. Can you provide a small sample of the data that you are trying to sift through? I can edit my answer accordingly.

İlker A. · Accepted Answer · 2018-07-20 14:19:08Z

0

Like this; https://angular.io/guide/displaying-data

<ng-container *ngFor="let book of booksDisplay; let i = index"> 
   <ng-container *ngIf="book.id === '1'">  
   <p> {{book.description}}</p>
</ng-container>

answered Jul 20, 2018 at 14:19

İlker A.

115 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related