Can't bind to 'placeholder' since it isn't a known property of 'ng-multiselect-dropdown'

Question

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

Kisangani

Did you add proper module to imports in module config?? – Purgatory

Yes , i included ==> import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; in app.module.ts – Kisangani

but i mean module imports, not source file import.... You better paste app.module.ts – Purgatory

Please check the question – Kisangani

Try to import { BrowserModule } from '@angular/platform-browser' as seen in your app.module.ts you haven't any instead you imported common module which are essential to use angular directives in feature modules and BrowserModule provides services that are essential to launch and run a browser app – Dzerzhinsk

does your component.html has a component.module.ts ?? – Blennioid

Answer 1

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.!

Turbit

could you please provide some clear example. Whether do I need to create HierarchySearch.module.ts file in my project.? – Blackfellow

Hi, what is the mean of HierarchySearchComponent, can you elaborate it I am also running with the same issue – Alleviate

Hi, you must remove NgMultiSelectDropDownModule.forRoot() from app.module.ts, then add: import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; and NgMultiSelectDropDownModule.forRoot() inside .module.ts file where your current component is imported. – Chambless

Answer 2

I faced this issue and solved by Adding

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

and

@NgModule({
imports: [
    NgMultiSelectDropDownModule
]
})

to xxxx.module.ts file where your component is imported not to app.module.ts file

Chambless

Answer 3

Add the multi select import in ComponentsModule where you have all components are imported. It has worked for me.

Doubleganger

Answer 4

check whether you are imported you are imported NgMultiSelectDropDownModule to module.ts

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

@NgModule({


imports: [
    NgMultiSelectDropDownModule
  ],

Vedanta

Answer 5

I am also working with angular 7 But my issue is resolved. I just import NO_ERRORS_SCHEMA and include in same module where ng-multiselect-dropdown module included @NgModule:

import { NgModule ,NO_ERRORS_SCHEMA} from '@angular/core';
import { FormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    AngularMultiSelectModule,
  ],
  schemas:[NO_ERRORS_SCHEMA], 
})
export class SettingsModule { }

Livorno

Answer 6

If you get this error in your unit test, you need to add the module to your imports in the TestBed.configureTestingModule

await TestBed.configureTestingModule({
      declarations: [YourComponent, ...MockComponents(...)],
      imports: [
        NgMultiSelectDropDownModule
      ],
      providers: [...
...

Strategic

Answer 7

Just import NO_ERRORS_SCHEMA its works for me

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    ReactiveFormsModule,
    NgMultiSelectDropDownModule.forRoot(),
  ],
  providers: [],
  schemas:[NO_ERRORS_SCHEMA], //WRITE THIS LINE
  bootstrap: [AppComponent]

Baluchi

Answer 8

Normally, this error occurs when you missed some imports. Please add these line if missing:

import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';

Prut