Using custom Angular Material Sort?

I want to create a dropdown (or mat-select) to use as a sorting mechanism instead of the Angular Material Sort Header. So, if I for example click on the 'username' inside the dropdown, I want the table to sort by the username (instead of clicking on the header).

How can I do it? Any documentation online on how to achieve this?

Thank you for any help.

As required, I attach some code:

  ngOnInit(): void {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(""),
      map((value) => this._filter(value))
    );
  }

  ngAfterViewInit() {
    this.providersAdmin.sort = this.sort;
  }

  getAllAdmins() {
    this.isLoading = true;
    this.homeService.getAllAdmins().subscribe(
      (response) => {
        this.admins = response;
          this.providersAdmin = new MatTableDataSource(this.admins);
        this.isLoading = false;
      },
      (error) => {}
    );
  }

  sortTableBy(event: any) {
    const sortState: Sort = {
      active: "username",
      direction: "desc",
    };
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);

    console.log(event);
  }

The sortTableBy method is the one I found on here but nothing happens.

I added matSort on the mat-table and I added mat-sort-header on the header cell.

EDIT: Hi, I managed to fix the problem by writing the following:

sortTableBy(event: any) {
    const sortState: Sort = {
      active: "username",
      direction: "desc",
    };
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);
    this.providersAdmin.sort = this.sort;
  }