I want to implement autocomplete feature , so an identical option i found was using multi-select drop-down. So i used this module -
https://www.npmjs.com/package/ng-multiselect-dropdown
But after ditto implementing, i get these errors -
Error -
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'ng-
multiselect-dropdown'.
1. If 'placeholder' is an Angular directive, then add 'CommonModule'
to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the
'@NgModule.schemas' of this component. ("
<ng-multiselect-dropdown
[ERROR ->][placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
"): ng:///AdminLayoutModule/HierarchySearchComponent.html@7:0
And when i comment placeholder in my component.html, i get this error -
Can't bind to 'data' since it isn't a known property of 'ng-
multiselect-dropdown'.
1. If 'data' is an Angular directive, then add 'CommonModule' to the
'@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the
'@NgModule.schemas' of this component.
"
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[ERROR ->][data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
"): ng:///AdminLayoutModule/HierarchySearchComponent.html@8:2
And the similar error continues till the last attribute.
Update
app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { AppComponent } from './app.component';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
//------------- Imported Modules -------------------------
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
HttpModule,
ComponentsModule,
RouterModule,
AppRoutingModule,
NgbModule.forRoot(),
NgMultiSelectDropDownModule.forRoot(),
CommonModule,
],
declarations: [
AppComponent,
AdminLayoutComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HierarchySearchComponent - This is the component for which you are using ng-multiselect-dropdown
.
So probably you would have HierarchySearch.module.ts.
You just remove NgMultiSelectDropDownModule.forRoot() from imports:[] in app.module.ts and import in HierarchySearch.module.ts.
It will work.!