app.component.html

app.component.html

<div class="container">
  <h2>Pipes Example</h2>
  <hr>
  <h3>Feed Status: {{feedStatus}}</h3>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ol class="list-group">
        <li class="alert" 
            *ngFor="let empl of Employees"
            [ngClass]="getEmployees(empl)">
          <span class="badge">
            {{ empl.name | shortName:true }}
          </span>
          <strong>{{ empl.desig | uppercase }}</strong> | {{ empl.location }} | {{ empl.joined | date:'fullDate' | uppercase }}
        </li>
      </ol>
    </div>
  </div>
</div>