mdb-autocomplete

Topic: mdb-autocomplete

noudard pro asked 6 years ago

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://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.jpg' },

{ name: 'Jane', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.jpg' },

{ name: 'John', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.jpg' },

{ name: 'Samantha', icon: 'https://mdbcdn.b-cdn.net/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

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

noudard pro answered 6 years ago

0 0 Best answer

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 {}

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: 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

noudard

Pro User

15Support score
1Questions 1Answers

0Snippets likes 0Snippets