Фильтрация таблицы с помощью кнопки в Angular 8

Question

У меня есть angular таблица. Мне нужно кнопку красного и зеленого цвета. На котором после нажатия будет отображаться единственное значение в таблице, содержащее красный или зеленый. Я обозначил красный как 0 и зеленый как 1. Я нашел похожую ссылку здесь, но она основана на Angular Js, а не на Angular 8.

Фильтр / нефильтр angular таблица основана на нажатии кнопки

Но код здесь совсем другой, и я не знаю, как реализовать его на Angular 8. Пожалуйста, помогите мне в этом. Вот код для машинописи (компонент)

import { Component, OnInit } from '@angular/core';
import { SalesDataService } from 'src/app/services/production.service';
import { interval, Subscription } from 'rxjs';
const source = interval(10);

@Component({
  selector: 'app-date-table',
  templateUrl: './date-table.component.html',
  styleUrls: ['./date-table.component.css']
})
export class DateTableComponent implements OnInit {

  public orders = [];
  public zone = [];
  total =0;
  page = 1;
  limit =10;
  loading = false;
  plant: any[];
  count:number;
  subscription : Subscription;


  constructor(private _salesData: SalesDataService) { }

  ngOnInit(): void {

   /*  this.getProduction(); */
    this.getByDate();
    this.subscription = source.subscribe(val =>
      {
        console.log(val),
        this.getByDate()
      });

  }

  getByDate():void{
    this._salesData.getByDate().subscribe(data => {this.orders = data});
  }
  zoneCount(productionPlan,production1):number
  {

        var zone = 0;
        if(productionPlan>production1)
        {
          zone = 0;
        }
        else if(productionPlan<=production1)
        {
          zone = 2;
        }

        console.log(zone);
        return zone;
    }



}

.card-deck{
  margin-bottom: 10px ;
}

.table
{
/*   background-image: url('../../../../../assets/img/blur-bg.jpg'); */
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);

}
.critical
{
  background-color: red;
  color: red;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;


}
.onHold
{
  background-color: yellow;
  color: yellow;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;

}
.positive
{
  background-color: #2dc937;
  color: #2dc937;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;

}
.null
{
  background-color: gray;
  color: gray;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.inner
{
  display: inline-block;
  justify-content: space-evenly;
}
.ms
{
/*   justify-content: space-between; */

  float: inline-start;

}

<!-- Start of Table -->
<div class= "card-header card-header-theme ">
   <div class="inner">
     <h5>Plan vs Actual</h5>
    </div>
   <div class="inner" >
    <button class= "btn btn-danger ">Red Zone</button>
   </div>
   <div class="inner ms">
    <button class= "btn btn-success">Green Zone</button>
   </div>


</div>

  <div class="card-body panel ">
     <table class="table table-inverse table-hover">
               <thead class="thead-dark">
                 <tr>
                   <th>Date</th>
                   <th>Plant</th>
                   <th>Plan</th>
                   <th>Actual</th>
                   <th>Zone</th>
                 </tr>
               </thead>
             <tbody>
                 <tr *ngFor= "let order of orders" class="panel">
                     <td>{{order.date | date: 'dd-MM-yyyy'}}</td>
                     <td>{{order.plantCode}}</td>
                     <td>{{order.productionPlan}}</td>
                     <td>{{order.production1}}</td>
                     <td>
                      <button [ngClass]="{critical: zoneCount(order.productionPlan,order.production1)=== 0, positive: zoneCount(order.productionPlan,order.production1) === 2}" >{{ zoneCount(order.productionPlan,order.production1) }}</button>
                     </td>
                 </tr>
             </tbody>

      </table>
      <!-- <app-pagination
        (goPage)="goToPage($event)"
        (goPrev) ="goToPrevious()"
        (goNext) ="goToNext()"
        [page]="page"
        [perPage]="limit"
        [count]="total">
      </app-pagination> -->
  </div>
 <!--End of Table 1-->

Спасибо