Use ng-multiselect-dropdown in a component instead of app.module.ts

Question

I am trying to use the ng-multiselect-dropdown component in another component/page (viz. registered through RouterModule.forRoot in app.mudule.ts). I have imported it in my component as suggested in this link-

import { Component, OnInit, NgModule, NO_ERRORS_SCHEMA } from 
'@angular/core';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule } from '@angular/forms';
@Component({
selector: "ng-multiselect-dropdown",
templateUrl: "./multiselect.component.html"
})

@NgModule({   
 imports: [
 NgMultiSelectDropDownModule.forRoot(),
 FormsModule
 ],
 schemas: [NO_ERRORS_SCHEMA]
})


export class MultiSelectComponent implements OnInit {
//constructor(private activatedRoute: ActivatedRoute,
//  private router: Router,
//  private http: HttpClient,
//  @Inject('BASE_URL') private baseUrl: string) {}
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
  this.dropdownList = [
    { item_id: 1, item_text: 'Mumbai' },
    { item_id: 2, item_text: 'Bangaluru' },
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' },
    { item_id: 5, item_text: 'New Delhi' }
  ];
  this.selectedItems = [
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' }
  ];
  this.dropdownSettings = {
    singleSelection: false,
    idField: 'item_id',
    textField: 'item_text',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true
  };
}
onItemSelect(item: any) {
  console.log(item);
}
onSelectAll(items: any) {
  console.log(items);
}
}

But I get the following errors, when I look in the browser developer tools. emplate 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. Can't bind to 'data' since it isn't a known property of 'ng-multiselect-dropdown'. Can't bind to 'settings' since it isn't a known property of 'ng-multiselect-dropdown'.

The html of the page is as below -

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
</head>
<body>
  <ng-multiselect-dropdown [placeholder]="'custom placeholder'"
                       [data]="dropdownList"
                       [(ngModel)]="selectedItems"
                       [settings]="dropdownSettings"
                       (onSelect)="onItemSelect($event)"
                       (onSelectAll)="onSelectAll($event)">
  </ng-multiselect-dropdown>
</body>
</html>

I have tried the above link, which is where I am getting an error — user9057272
It looks wrong that you have defined your own selector as "ng-multiselect-dropdown", making it 'override' the imported one. Try renaming it to e.g. @Component({ selector: "my-dropdown", templateUrl: "./multiselect.component.html" }) — MikNiller
So, should I just remove the line - selector: "ng-multiselect-dropdown" ? — user9057272
Whar happens if you just rename it? It looks like you are trying to build your own angular component so you would most likely need a selector (with your own defined name) — MikNiller

Rohan Agarwal Rohan Agarwal · Accepted Answer · 2019-01-07T19:42:48

This error means that the component's module doesn't have the required imports. Try importing the module in this components' module file.

Use ng-multiselect-dropdown in a component instead of app.module.ts

3 Answers