NG8002: Can't bind to 'ngModel' since it isn&

I am trying to use the select with searchbox example but getting the following error message:

src/app/app.component.html:11:15 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mdb-select-filter'.
1. If 'mdb-select-filter' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mdb-select-filter' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

11               [ngModel]="searchText | async"
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

My app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MDBBootstrapModulesPro, MDBSpinningPreloader, MdbSelectModule } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModulesPro.forRoot(),
    MdbSelectModule
  ],
  providers: [
    MDBSpinningPreloader
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'web';
  searchText = new Subject();
  filteredOptions: Observable<any[]>;
  options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];

  ngOnInit() {
    this.filteredOptions = this.searchText.pipe(
      startWith(''),
      map((value: string) => this.filter(value))
    );
  }

  filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.options.filter((option: any) => option.label.toLowerCase().includes(filterValue));
  }
}

And finally the HTML:

<div class="md-form">
  <mdb-select-2 placeholder="Choose your option" label="Example label">
    <mdb-select-filter
      [ngModel]="searchText | async"
      (ngModelChange)="searchText.next($event)">
    </mdb-select-filter>
    <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.label }}</mdb-select-option>
  </mdb-select-2>
</div>