Custom Filter Function for Select Filter Feature

Ok well the data bind the select has tons of rows so client filtering is not an option.

Ive made an directive to "hack" into the filtering option. I kindly want to provide this snippet. Somehow the "Crate Snippet" Function seems to be broken so I hope its ok to post it here:

customfilter Directive

import { Directive, AfterContentInit, Input, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core';
import { MdbSelectComponent } from 'mdb-angular-ui-kit/select';
import { skipWhile, debounceTime, tap } from 'rxjs/operators';
import { FormControl } from '@angular/forms';
@Directive({
    selector: '[customfilter]'
})
export class CustomfilterDirective implements AfterContentInit, OnChanges {


    @Input()
    public customfilter: MdbSelectComponent;

    @Input()
    public debounce = 300;

    @Input()
    public forwardToControl: FormControl;

    @Input()
    public isLoading = false;

    @Input()
    public loadingText = 'Loading...';

    @Input()
    public notFoundText = 'No results.';


    @Output()
    public filtered: EventEmitter<{
        searchControl: FormControl;
        val: unknown;
    }> = new EventEmitter<{
                searchControl: FormControl;
                val: unknown;
            }>();

    public ngAfterContentInit(): void {
        this._init();
    }

    public ngOnChanges(changes: SimpleChanges): void {
        if (changes.isLoading && this.customfilter) {
            if (this.isLoading) {
                this.customfilter.notFoundMsg =  this.loadingText;
            } else {
                this.customfilter.notFoundMsg = this.notFoundText;
            }
        }
    }

    private _init(): void {
        if (this.customfilter) {
            console.log ('Found MdbSelectComponent. Will now try to access the filter control...');

            if (this.customfilter.selectFilter) {
                console.log('Found select filter. Attaching...', this.customfilter.selectFilter);
                this.customfilter.notFoundMsg = 'Loading...';
                // We will update the not found message
                // to show we are actually loading results
                this.customfilter.selectFilter
                    .valueChanges
                    .pipe(skipWhile(x => !x || x === ''))
                    .pipe(tap(() => this.isLoading = true))
                    .pipe(debounceTime(this.debounce))
                    .subscribe(value => {
                        this.filtered.emit({
                            searchControl: this.customfilter?.selectFilter,
                            val: value
                        });

                        if(this.forwardToControl) {
                            this.forwardToControl.setValue(value, {
                                emitEvent: true
                            });
                        }
                    });
            }

        }
    }

}

Example

<mdb-select 
#mySelect
                [customfilter]="mySelect"
                [filter]="true"
              [forwardToControl]="form.controls.myCustomFormControl"></mdb-select>

This way it forwards the filter value to your custom formControl. You can also use the (filtered) output.

Once value of the original filter control changed it sets the loading state until you change it back (true/false). I "misuse" the noresults found text for propery displaying whats going on.