パイプを使用して、いくつかのチェックボックスと検索フィールドでデータフィルタリングを整理するにはどうすればよいですか？

私はAngular6の研究を続けていますが、パイプを使用していくつかのチェックボックスと検索フィールドでデータフィルタリングを整理する方法がわからないという事実に遭遇しました。たくさんのフォーラムやレッスンを読んでいますが、この課題を理解できません。

コードからの切り抜きは次のとおりです。

私のコンポーネント：

import { Component, OnInit, Output } from '@angular/core';
import { AdminService } from '../admin.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-app-module',
  templateUrl: './app-module.component.html',
  styleUrls: ['./app-module.component.scss']
})

export class AppModuleComponent implements OnInit {
   public data: {
    services: [
      {
        id: number,
        name: string,
        url: string,
        connected: boolean,
        used: boolean,
        warning: boolean
      }

    ]
  };
  public services: any = [];
  constructor(private adminService: AdminService) { }


  ngOnInit() {
    this.getServicesList();
  }

  getServicesList() {
    this.adminService.getServices()
      .subscribe(data => {
        this.data = data;
        this.services = data.services;
      });
  }
}

私のサービス：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AdminService {
private API = 'http://localhost:3000';
constructor(
    private _http: HttpClient
) { }
getServices(): Observable<any> {
return this._http.get<any>(this.API + '/services');
}
}

私のcomponent.html

<div class="bg-gray wraper d-flex align-items-center justify-content-center">
  <div class="ui-card d-flex flex-column">
    <div>
      <strong>App Integration</strong>
    </div>
    <div class="search-box py-3">

      <form class="d-flex flex-row align-items-center">
        <input class="form-control form-search mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <input class="ui-checkbox" type="checkbox" value="" id="connected">
        <label class="form-check-label" for="connected">
          Connected
        </label>
        <input class="ui-checkbox" type="checkbox" value="" id="discovered">
        <label class="form-check-label" for="discovered">
          Discovered (not connected)
        </label>
        <input class="ui-checkbox" type="checkbox" value="" id="unused">
        <label class="form-check-label" for="unused">
          Unused
        </label>
      </form>


    </div>
    <div class="ui-services-box d-flex flex-wrap justify-content-between">
      <div *ngFor="let service of services"
      class="ui-service d-flex flex-wrap justify-content-between align-items-center"
      [ngClass]="{'brd-warning': service.warning}"
      [style.border-color]="!service.connected || !service.used ? '#9ea5b5':'#2bc339'"

      >
        <img src="{{service.url}}" alt="">
        <p>{{service.name}}</p>
        <div *ngIf="service.warning" ><i class="fa fa-exclamation-circle" aria-hidden="true"></i></div>
        <div *ngIf="!service.used" ><i class="fa fa-lock" aria-hidden="true"></i></div>
        <div
        class="button-green"
        *ngIf="service.used"
        [style.background-color]="service.connected === 0 ? '#9ea5b5': '#2bc339'">
          {{ service.connected ? "Connected" : "Connect" }}
        </div>
      </div>
    </div>
  </div>
</div>

私のデータ：

services = [
{
id: 1,
    url: './assets/img/services/atlassian.png',
    name: 'Atlassian',
    connected: 1,
    used: 1,
    warning: 0 
},
{
    id: 2,
    url: './assets/img/services/google.png',
    name: 'Google G Suite',
    connected: 1,
    used: 1,
    warning: 1
 },
{
    id: 3,
    url: './assets/img/services/salesforce.svg',
    name: 'Salesforce',
    connected: 0,
    used: 1,
    warning: 1
 }
]

以下はスクリーンショットです。すべてのサービスがページに表示されていることを示しています。上部に検索フィールドがあり、3つのチェックボックスがあります。サービスのリストを、検索フィールドで操作した名前で並べ替えたいと思います。チェックボックスの値。