*ngFor

Giống như các JS Library khác, chúng ta sẽ sử dụng Loop để render ra nhiều các Component giống nhau

export class AppComponent {
  books = [
    { author: 'John Doe', title: 'Book 1' },
    { author: 'Jane Doe', title: 'Book 2' },
    { author: 'John Moe', title: 'Book 3' },
  ];
}

<!-- *ngFor -->
<ul>
  <li *ngFor="let item of books">{{ item.author }} - {{ item.title }}</li>
</ul>

*ngFor cung cấp cho chúng ta các giá trị:

• $implicit: là item của array
• index: vị trí index
• count: độ dài của array
• first: kiểu boolean, trả về true nếu là phần tử đầu tiên
• last: kiểu boolean, trả về true nếu là phần tử cuối cùng
• even: kiểu boolean, trả về true nếu là phần tử ở vị trí index là chẵn
• odd: kiểu boolean, trả về true nếu là phần tử ở vị trí index là lẻ