this error only appears when I try to put the component in HTML
Uncaught Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'angular2-multiselect'.
If 'angular2-multiselect' is an Angular component and it has 'data' input, then verify that it is part of this module.
If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (""col">
<angular2-multiselect [ERROR ->][(data)]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemS"): ng:///PlanModule/CreatePLanComponent.html@54:46
Can't bind to 'settings' since it isn't a known property of 'angular2-multiselect'.
If 'angular2-multiselect' is an Angular component and it has 'settings' input, then verify that it is part of this module.
If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<angular2-multiselect [(data)]="dropdownList" [(ngModel)]="selectedItems" [ERROR ->][settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
(onDeSelect)"): ng:///PlanModule/CreatePLanComponent.html@54:98
'angular2-multiselect' is not a known element:
If 'angular2-multiselect' is an Angular component, then verify that it is part of this module.
If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<angular2-multiselect [(data)]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSetting"): ng:///PlanModule/CreatePLanComponent.html@54:24
at syntaxError (compiler.js:485) []
at TemplateParser.parse (compiler.js:24668) []
at JitCompiler._parseTemplate (compiler.js:34621) []
at JitCompiler._compileTemplate (compiler.js:34596) []
at eval (compiler.js:34497) []
at Set.forEach () []
at JitCompiler._compileComponents (compiler.js:34497) []
at eval (compiler.js:34367) []
at Object.then (compiler.js:474) []
at JitCompiler._compileModuleAndComponents (compiler.js:34366) []
at JitCompiler.compileModuleAsync (compiler.js:34260) []
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239) []
at PlatformRef.bootstrapModule (core.js:5567) []
at eval (webpack-internal:///./src/main.ts:10) []
I tried several times, updated the angular, typescript and CLI and the error persists if i remove [data] and [(ngModel)] [settings] it shows the following error:
Uncaught Error: Template parse errors:
'angular2-multiselect' is not a known element:
If 'angular2-multiselect' is an Angular component, then verify that it is part of this module.
If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
at syntaxError (compiler.js:485) []
at TemplateParser.parse (compiler.js:24668) []
at JitCompiler._parseTemplate (compiler.js:34621) []
at JitCompiler._compileTemplate (compiler.js:34596) []
at eval (compiler.js:34497) []
at Set.forEach () []
at JitCompiler._compileComponents (compiler.js:34497) []
at eval (compiler.js:34367) []
at Object.then (compiler.js:474) []
at JitCompiler._compileModuleAndComponents (compiler.js:34366) []
at JitCompiler.compileModuleAsync (compiler.js:34260) []
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239) []
at PlatformRef.bootstrapModule (core.js:5567) []
at eval (main.ts:11) []
my app.module
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
import { YearPickerComponent } from './year-picker/year-picker.component';
import { PlanModule } from './plan/plan.module';
import { ClientMasterModule } from './client-master/client-master.module';
import { RestService } from './rest.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { TableListComponent } from './table-list/table-list.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { MapsComponent } from './maps/maps.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UpgradeComponent } from './upgrade/upgrade.component';
import { CommonFunctionsService } from './common-functions.service';
import * as $ from 'jquery';
import { DataTablesModule } from 'angular-datatables';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { PaginationModule } from "ng2-bootstrap/pagination";
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
UserProfileComponent,
TableListComponent,
TypographyComponent,
IconsComponent,
MapsComponent,
NotificationsComponent,
UpgradeComponent,
YearPickerComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule,
DataTablesModule,
Ng2SmartTableModule,
Ng2TableModule,
RouterModule,
AppRoutingModule,
ClientMasterModule,
PaginationModule.forRoot(),
AngularMultiSelectModule,
PlanModule
],
providers: [RestService, CommonFunctionsService],
bootstrap: [AppComponent]
})
export class AppModule { }
I am also working with angular 5 . But my issue is resolved. I just import NO_ERRORS_SCHEMA and include in same module where angular2-multiselect-dropdown module included @NgModule.
here is my module
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 { }
. . .
"): ng:///AdminModule/ReportsComponent.html@76:67
'angular2-multiselect' is not a known element:
If 'angular2-multiselect' is an Angular component, then verify that it is part of this module.
If 'angular2-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
this error only appears when I try to put the component in HTML
You have syntax error. data should be [data] and not [(data)]
I used the example that is in the documentation
But see the error you are getting. This is not a bug with component. Please implement again.
I tried several times, updated the angular, typescript and CLI and the error persists if i remove [data] and [(ngModel)] [settings] it shows the following error:
I ran across this same issue when running unit tests.
Resolved my issue by updating the test spec to ignore errors: https://stackoverflow.com/questions/44365392/how-to-ignore-an-html-tag-of-a-3rd-party-component-in-an-angular4-unit-test
Still an issue, I have the same problem. Anyone already found solution?
I am also working with angular 5 . But my issue is resolved. I just import NO_ERRORS_SCHEMA and include in same module where angular2-multiselect-dropdown module included @NgModule. here is my module
the same issue I have.... I've trried example from demo. Unfortunately doesn't work...
ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'settings' since it isn't a known property of 'angular2-multiselect'.
I had this error for a long time before I realized i was using: <angular2-multiselect-dropdown .... > instead of: <angular2-multiselect ....>
I imported AngularMultiSelectModule in the same module where i need to use the component. It fixed the error.
Had same issue so instead of importing module I've imported following multiselect modular dependency separately and it worked-
imports: [ CommonModule,FormsModule ], declarations: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe],
My solution looks like -
import {CommonModule} from "@angular/common"; import {FormsModule} from "@angular/forms"; import {ClickOutsideDirective} from "angular2-multiselect-checkbox-dropdown/src/app/angular2-multiselect-dropdown/clickOutside"; import {ListFilterPipe} from "angular2-multiselect-checkbox-dropdown/src/app/angular2-multiselect-dropdown/list-filter"; import {AngularMultiSelect} from "angular2-multiselect-checkbox-dropdown/src/app/angular2-multiselect-dropdown/multiselect.component";
@NgModule({ imports: [ NbCardModule, ThemeModule, NbSelectModule, CommonModule,FormsModule ], declarations: [ DashboardComponent,AngularMultiSelect, ClickOutsideDirective, ListFilterPipe ], }) export class DashboardModule { }
This bug is still present. Please fix.