title: Angular 6 *ngFor display different styles for first, odd, even and last
body: <p>I am learning Angular 6 and just trying to put togheter some of the stuff I have learned and I am currently running into an issue that I cannot find an answer to. I am trying to change the style of a LI using *ngFor depending if the index is First, Last, Odd or Even. So far everything works but I can't figure out how to do it for the Last because everything I add a new object to my list, it is obviously the last so it render the color for the last.</p>
  
  <p>I understand how to do it but the real problem is that I am adding stuff dynamicly to my list from a form and I'm not sure how to evaluate the Last so that the others become to right color.</p>
  
  <p>Keep in mind that I am still a newb and it might look messy and I also understand that some client-side validations I am doing are probably not optimal or required since HTMl5 but I made it to learn. </p>
  
  <p>Here is my code for my component HTML</p>
  
  <p>></p>
  
  <pre><code>&lt;h1&gt;List of courses :&lt;/h1&gt;&lt;br&gt;
  &lt;div *ngIf="courses.length &gt; 0; then coursesList else noCourses"&gt;&lt;/div&gt;
  
  &lt;ng-template #coursesList&gt;
    &lt;h2&gt;List of Courses :&lt;/h2&gt;
    &lt;ul *ngFor="let course of courses; index as i;"&gt;
      &lt;li [ngStyle]="{'background-color':getColor(i)}" style="color: white;"&gt;
        &lt;strong&gt;Index : &lt;/strong&gt;{{i}} &lt;strong&gt;ID : &lt;/strong&gt;{{course.id}} &lt;strong&gt;Name&lt;/strong&gt; : {{course.name}}
        &lt;button (click)="onRemove(i)"&gt;Remove&lt;/button&gt;
        &lt;button (click)="onModify(i)"&gt;Modify&lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ng-template&gt;
  &lt;ng-template #noCourses&gt;
    &lt;h5&gt;There are no courses in this list. Use the form bellow to add some.&lt;/h5&gt;
  &lt;/ng-template&gt;
  
  &lt;div (keyup.enter)="onAdd()"&gt;
    &lt;span&gt;ID : &lt;input type="number" (keypress)="checkNumber($event)" [(ngModel)]="fields.id" placeholder="Enter an ID"&gt;&lt;/span&gt;
    &lt;span&gt;Name : &lt;input type="text" [(ngModel)]="fields.name" placeholder="Enter a NAME"&gt;&lt;/span&gt;
    &lt;button (click)="onAdd()"&gt;Add&lt;/button&gt;
    &lt;button (click)="onClear()"&gt;Clear&lt;/button&gt;
  &lt;/div&gt;
  &lt;div *ngIf="isNotNumber" style="background-color: red; color:black"&gt;&lt;strong&gt;ID can only be numbers !&lt;/strong&gt;&lt;/div&gt;
  &lt;div *ngIf="noValues" style="background-color: red; color:black"&gt;&lt;strong&gt;Please fill all fields !&lt;/strong&gt;&lt;/div&gt;
  &lt;div *ngIf="noModifyValues" style="background-color: red; color:black"&gt;&lt;strong&gt;To modify enter all informations!&lt;/strong&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Code for .TS</p>
  
  <p>></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent {
    noValues: boolean;
    noModifyValues: boolean;
    isNotNumber: boolean;
    fields: Courses = {id: null, name: null};
    courses: Array&lt;Courses&gt; = [];
    viewMode: string = null;
  
    checkNumber($event) {
      if ($event.keyCode != 13) {
        isFinite($event.key) ? this.isNotNumber = false : this.isNotNumber = true;
      }
    }
  
    onAdd() {
  
      if (!this.fields.id || !this.fields.name) {
        this.noValues = true;
      } else {
        this.courses.push({id: this.fields.id, name: this.fields.name});
        this.fields.id = null;
        this.fields.name = null;
        this.noValues = false;
      }
    }
  
    onRemove(i) {
      this.courses.splice(i, 1);
    }
  
    onClear() {
      this.courses = [];
      this.fields.id = null;
      this.fields.name = null;
      this.noValues = false;
    }
  
    onModify(i) {
      if (!this.fields.id || !this.fields.name) {
        this.noModifyValues = true;
      } else {
        this.courses[i].name = this.fields.name;
        this.courses[i].id = this.fields.id;
        this.noModifyValues = false;
  
      }
    }
  
    getColor(i){
      if (i % 2 === 0 &amp;&amp; i != 0){i = 'odd';}
      switch (i) {
        case i = 0 : return 'orange';
        case i = 'odd' : return 'blue';
      }
      return 'red';
    }
  }
  interface Courses {
    id: number;
    name: string;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vwHno.png" rel="nofollow noreferrer">Image of the code in action for better understanding.</a></p>