DenisCangemi

<ul *ngFor="let product of products">
  <li>
    <p>{{ product.name }}</p>
    <span 
          [class.text-available]="product.status === 'Available'"
          [class.text-few-items-left]="product.status === 'Few Items Left''"
          [class.text-out-of-stock]="product.status === 'Out of Stock'">
      {{product.status}}
    </span>
  </li>

DenisCangemi

.text-available{
  color: #27ae60;
}

.text-few-items-left{
  color: #f39c12;
}

.text-out-of-stock{
  color: #e74c3c;

DenisCangemi

<ul *ngFor="let product of products">
  <li>
    <p>{{ product.name }}</p>
    <span [ngClass]="{'text-available':product.status === 'Available',
                      'text-few-items-left':product.status === 'Few Items Left',
                      'text-out-of-stock':product.status === 'Out of Stock'}">
      {{product.status}}
    </span>
  </li>
</ul>

DenisCangemi

<ul *ngFor="let product of products">
   <li>
      <p [ngStyle]="{'font-size.px':20}">{{ product.name }}</p>
      <span [style.color]="getAvailabilityColor(product.status)">{{product.status}}</span>
   </li>
</ul>

DenisCangemi

getAvailabilityColor(availability:string) {
  switch(availability){
    case 'Available': return 'green'
    case 'Few Items Left': return 'yellow'
    case 'Out of Stock': return 'red'
  }
}

DenisCangemi

<ul *ngFor="let product of products">
  <li>
    <p>{{ product.name }}</p>
    <span [style.color]="getAvailabilityColor(product.status)">{{ product.status }}</span>
  </li>
</ul>

DenisCangemi

<div>
  <p [ngStyle]="{'color':product.unit === 0 ? 'red' : 'green' }">{{product.name}}</p>
</<div>

DenisCangemi

let item = localStorage.getItem('greeting1')
// Result : 'Hello LocalStorage'

DenisCangemi

if (window.localStorage) {
  // localStorage supported
}

DenisCangemi

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(key, value);
}