Topic: NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mdb-select-filter'.

dtrunk90 free asked 3 years ago

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"

    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';

  declarations: [
  imports: [
  providers: [
  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';

  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(
      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">
      [ngModel]="searchText | async"
    <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.label }}</mdb-select-option>

dtrunk90 free answered 3 years ago

Nevermind. I got it working by adding NO_ERRORS_SCHEMA as suggested.

Grzegorz Bujański staff commented 3 years ago

Ok. I'm glad you solved this problem.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Linux Ubuntu
  • Provided sample code: No
  • Provided link: Yes