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

user_9057272 0
Viewed 4689

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>
angular asp.net-core node.js
3 Answers

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

user_85396800

Instead of 

[placeholder]="'custom placeholder'"

use 

[value]="custom placeholder"

And of course check that the import in the module It's done the correct way

However I checked the official documentation and you can bind the placeholder property

user_46639660

Finally got it to work. The NgMultiSelectDropDownModule module itself should be imorted to app.module.ts. The ngOnInit() method should be used inside the component.ts. As correctly pointed out by others, the component's own selector should be different from the ng-multiselect-dropdown selector used in the component html.

user_90572720
Related