how to add 3 inline filters and filter based on content added using angular13

i am using angular13, here i need to have inline filter for 3 column names, so in html also i have added 3 filters, but i am able to show filtered list for comments and not for page number and user name.

HTML:

<div class="row mb-2">
  <ul class="list-group list-group-flush">
    <li class="list-group-item font-weight-bold mr-3">
      <div class="row">
        <div class="col-7 mt-2"></div>
        <div class="col-2"></div>
      </div>
    </li>
  </ul>
</div>
<div class="row">
  <div class="col-12">
    <div class="card shadow-sm border-0 swap-list list-left">
      <div class="card-body overflow-auto py-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item font-weight-bold mr-3">
            <div class="row">
              <div class="col-4">
                Comments
                <input
                  type="text"
                  class="form-control is-search"
                  placeholder="Search Comments"
                  [(ngModel)]="name"
                  [ngModelOptions]="{ standalone: true }"
                />
              </div>
              <div class="col-2">
                Page #
                <input
                  type="text"
                  class="form-control is-search"
                  placeholder="Page Number"
                  [(ngModel)]="pageNumber"
                  [ngModelOptions]="{ standalone: true }"
                />
              </div>
              <div class="col-2">
                User
                <input
                  type="text"
                  class="form-control is-search"
                  placeholder="User"
                  [(ngModel)]="userName"
                  [ngModelOptions]="{ standalone: true }"
                />
              </div>
            </div>
          </li>
        </ul>
        <ul class="list-group list-group-flush mh-350 mh-650 pointer">
          <li
            class="list-group-item"
            *ngFor="
              let customer of annotationList | searchSingleValue: name;
              index as index
            "
          >
            <div class="row">
              <div class="col-4 text-wrap">
                <ngb-highlight [result]="customer.comment" [term]="name">
                </ngb-highlight>
              </div>
              <div class="col-2">
                <ngb-highlight
                  [result]="customer.pageNumber"
                  [term]="pageNumber"
                >
                </ngb-highlight>
              </div>
              <div class="col-2">
                <ngb-highlight [result]="customer.userName" [term]="userName">
                </ngb-highlight>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

TS:

 name:any ='';
  pageNumber:any = '';
  userName: any ='';
  annotationList = [
    { comment: 'image 1', pageNumber: 1, user: 'user' },
    { comment: 'business', pageNumber: 2, user: 'user' },
    { comment: 'screen shot image', pageNumber: 2, user: 'admin' },
    { comment: 'screen shot image 2', pageNumber: 1, user: 'readonly' },
    { comment: 'role based', pageNumber: 2, user: 'user' },
    { comment: 'demo check', pageNumber: 3, user: 'user' },
    { comment: 'screen', pageNumber: 1, user: 'admin' },
    { comment: 'shot image 2', pageNumber: 3, user: 'readonly' },
  ];

pipe filter:

@Pipe({
  name: 'searchSingleValue',
})
export class SearchSinglePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!args) {
      return value;
    }
    return value.filter((val: any) => {
      let rVal = val.comment.toLocaleLowerCase().includes(args);
      return rVal;
    });
  }
}

@Pipe({
  name: 'searchUserValue',
})
export class SearchUserPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!args) {
      return value;
    }
    return value.filter((val: any) => {
      let rVal = val.userName.toLocaleLowerCase().includes(args);
      return rVal;
    });
  }
}

@Pipe({
  name: 'searchUserValue',
})
export class SearchPagePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!args) {
      return value;
    }
    return value.filter((val: any) => {
      let rVal = val.pageNumber.toLocaleLowerCase().includes(args);
      return rVal;
    });
  }
}

on the html, filter is added for only comments, but how can that be added for other 2 columns as well.