task#05 ngFor structure

*ngFor Structure Syntax

1. Add an auctions variable to your component and fill it with 5 items of aution title
2. Add a div tag with *ngFor and iterate over all auctions with auction.title
3. Add a color style for odd rows.

Result

Compile and start the application with

ng serve

Open your browser

• Open your browser with the address http://localhost:4200/
• you should see all auction titles

Hints

auction-list.component.ts

Add the array to auction-list.component:

...
 auctions = [
    {title: 'bike'},
    {title: 'iPhone'},
    {title: 'watch'},
    {title: 'table'},
    {title: 'boat'}
    ];
...

auction-list.component.html In the code snippet below we use the ngFor directive to iterate over the auction array and store each item in a template variable called auction. This variable is then accessed within the template using interpolation. We highlight every other row by applying a CSS class when the row is odd. Angular provides an even value too.

...
<div
  *ngFor="let auction of auctions; let isOdd=odd; ">
  <div c>
    <p [class.highlight]="isOdd">{{auction.title}}</p>
  </div>
</div>

<!--<app-mouse-event-display></app-mouse-event-display> -->

auction-list.component.scss

.highlight {
  background-color: Lavender
}