//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <table style="width:100%">
        <tr>
          <th>value</th>
        </tr>
         <tr *ngFor="let n of numbers">
          <td [ngClass]="{'red': n == 1, 'green': n == 2, 'orange': n == 3
                , 'pink': n == 4, 'blue': n == 5}">{{n}}</td>
        </tr>
      </table>
    </div>
  `,
})
export class App {
  numbers:number[] = [1,3,4,5,2,3,1];

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {

}


/* Styles go here */

.orange{
  background-color:orange;
}


.red{
  background-color:red;
}


.pink{
  background-color:pink;
}


.green{
  background-color:green;
}

.blue{
  background-color:blue;
}