Topic: mdb-autocomplete
Hello,
I'm beginning with angular. i try to use autocomplete like your example but i can see one error:
[Angular]
Can't bind to 'ngModel' since it isn't a known property of 'mdb-autocomplete'.
1. If 'mdb-autocomplete' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mdb-autocomplete' 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.
I just added in my app.component.html
<mdb-autocomplete[label]="'Select color'"initialValue="Select color"name="autocomplete"[(ngModel)]="searchStr"[datasource]="dataService"[minSearchLength]="0"> </mdb-autocomplete>
in my app.component.ts :
import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title='myapp';
protectedsearchStr:string;
protecteddataService:CompleterData;
protectedsearchData= [
{ name: 'Anthony', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
{ name: 'Jane', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
{ name: 'John', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg' },
{ name: 'Samantha', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg' }
];
constructor(privatecompleterService:CompleterService) {
this.dataService=completerService.local(this.searchData, 'name', 'name').imageField('icon');
}
}
and my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
MDBBootstrapModulesPro.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Thanks for your help
Add comment
Dear noudard,
Thanks for the code which you have provided! Please try to add FormsModule in your app.module.ts file, and check if the error still exists. If yes, please let me know, and I'll provide you other solution.
Best Regards,
Damian
Dear noudard,
I have tried to reproduce your problem with my fresh new project but without success.
I have added FormsModule and BrowserAnimationsModule into my app.module.ts, and everything is working fine.
Could you please check, if you have followed every step from our 5min-quickstart properly? Maybe you've missed something?
Also please try to add schemas: [NO_ERRORS_SCHEMA] to app.module.ts after bootstrap: [AppComponent]
Best Regards,
Damian
Hi,
I just added FormsModule like bellow but the error still exists.
My app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule } from '@angular/forms';
import {MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
MDBBootstrapModulesPro.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: mac
- Browser: chrome
- OS: 10.13.6
- Provided sample code: No
- Provided link: No