Применить фильтр на загрузочные карты

Question

Я использую структуру карты начальной загрузки. Я хочу применить фильтрацию к структуре карты, как показано ниже.

Как показано на изображении выше, например При нажатии клиентской программы все доступные значения откроются в одной панели с флажком, и я могу выбрать все, что угодно, и нажать «Применить», чтобы увидеть отфильтрованные данные. Но я не могу этого достичь. Ниже моя структура HTML.

 <div class="card card-design searchDatajs" *ngFor="let clientlist of myClientslistViewList">
    <div class="card-body">
      <label class="CardViewText CardViewHeaderFont marginZero">ABC</label>
      <img class="float-right" src="../../../../assets/images/MyClientCardView/bell.png" /><br />
      <label class="marginZero">(01937)</label><br />
      <span class="Audit">AUDIT</span>&nbsp;&nbsp;<span class="Audit">TAX</span>
    </div>
    <hr />
    <div class="card-body">
      <span>Public Company (ABCC)</span><br />
      <span>Core Client Program</span><br />
      <span>S-Corporation Company Type</span>
    </div>
    <hr />
    <div class="card-body">
      <img class="float-left" src="../../../../assets/images/MyClientCardView/Engagements_Review.png" />
      <a id="ViewEngagements" class="showEngagementDetailsjs marginZero" style="color:black"

      data-toggle="modal" href='#ActivityModal'>&nbsp;Active Engagements
        (5)</a>
      <img class="float-right" src="../../../../assets/images/MyClientCardView/arrow_card-view.png" />
    </div>
  </div> 

Может кто-нибудь, пожалуйста, помогите мне с этим.