people.json

---------------

 [

    {

      "name": "Douglas  Pace",

      "age": 35,

      "country": "UK"

    },

    {

      "name": "Mcleod  Mueller",

      "age": 32,

      "country": "USA"

    },

    {

      "name": "Day  Meyers",

      "age": 21,

      "country": "HK"

    },

    {

      "name": "Aguirre  Ellis",

      "age": 34,

      "country": "UK"

    },

    {

      "name": "Cook  Tyson",

      "age": 32,

      "country": "USA"

    }

  ]

  

  

app.component.html

----------------------

  <h4>NgClass</h4>

<ul *ngFor="let person of peopleList">

  <li [ngClass]="{

  'text-success':person.country === 'UK',

  'text-primary':person.country === 'USA',

  'text-danger':person.country === 'HK'

  }">

  {{ person.name }} ({{ person.country }})

  </li>

</ul>

<h4>NgStyle</h4>

<ul *ngFor="let person of peopleList">

  <li [ngStyle]="{'font-size.px':24}"

      [style.color]="getColor(person.country)">

    {{ person.name }} ({{ person.country }})

  </li>

</ul>

app.component.ts

--------------------

import people from './_files/people.json';

public peopleList:{name:string, age:number, country:string}[] = people; 

  

  getColor(country: any) {

    switch (country) {

      case 'UK':

        return 'green';

      case 'USA':

        return 'blue';

      case 'HK':

        return 'red';

    }

    return 'green';

  }

  

  app.component.css

  -----------

  .text-success{

    color: green;

    font-style: bold;

}

.text-primary{

    color:blue ;

    font-style: bold;

}

.text-danger{

    color:red ;

    font-style: bold;

}

PostedBy:pankaj_bhakre