Can't bind to 'collapse' since it isn't a known property of 'div'

[crebuh]

I'm getting the error above when using a collapse element with Angular 2.0.0 and ng2-bootstrap 1.1.5 with webpack 2.1.0-beta.22. I have to add, that I'm working on an angular-universal project (https://github.com/angular/universal). Not sure if the error is related to that. Here is my configuration.

main.browser.ts

  @NgModule({
bootstrap: [App],
declarations: [
    App,
    // Pages
    DashboardPage,
    SidebarComponent,
    HeaderComponent,
    FooterComponent
],
imports: [
    Ng2BootstrapModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutes,
    TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
    }),
    UniversalModule // BrowserModule, HttpModule, and JsonpModule are included    
],
providers: [
    AuthService,
    UsersService
]
})

devbar.component.ts

 import { Component } from '@angular/core';

@Component({
selector: 'component-devbar',
templateUrl: 'devbar.component.html',
styleUrls: ['devbar.component.scss']
})
export class DevbarComponent {

public isCollapsed: boolean;

constructor() {
    this.isCollapsed = false;
}

public collapsed(event: any): void {
    console.log(event);
}

public expanded(event: any): void {
    console.log(event);
}

}

devbar.component.html

 <div id="devBar" class="hidden-xs-down" (click)="isCollapsed = !isCollapsed">
    <small id="title">{{ title }}</small>
    <div class="row" [collapse]="isCollapsed" (collapsed)="collapsed($event)" (expanded)="expanded($event)">Content</div>
</div>

Any advice for that problem?

[ghost]

Looks like you just need to add CollapseModule to your imports or add CollapseDirective to your declarations in your NgModule.

Oops ignore that I didn't notice that it had already been imported.

[Martin-Luft]

@EricMLee never add an imported directive to your declarations, never! Ng2BootstrapModule is imported therefore CollapseModule is already imported.

@crebuh your component code and template is working for me but I miss the DevbarComponent in your ngModule declarations.

[crebuh]

@Martin-Wegner

You are right, but It seems that I made an error on pasting the code example here. Even if I add the devBarComponent the error exists. The problem is that on the server I can't import the Ng2BootstrapModule. If I do so I got the following error:

 /home/ch/project/node_modules/ng2-bootstrap/components/dropdown/dropdown-toggle.directive.js:62
    __metadata('design:paramtypes', [MouseEvent]), 
                                     ^
 ReferenceError: MouseEvent is not defined
at /home/ch/projects/node_modules/ng2-bootstrap/components/dropdown/dropdown-toggle.directive.js:62:42

I need a way to ignore those directives on the server side somehow.

[Martin-Luft]

Oh this is #964

[crebuh]

That means no solution right now?

[Martin-Luft]

As I know yes :( @valorkin any hope for @crebuh ?

[valorkin]

Yes a lot of hope, at ng conf they will announce interesting things. So SSR compatibility will be mandatory

[SaberCodeSmith]

For anyone has the same issue please refere to the answer here https://support.aspnetzero.com/QA/Questions/4967/Collapse-component-causes-error

[facubarneche]

Hello!, try with this lines in the component's parent module

import { CollapseModule } from 'ngx-bootstrap/collapse';

 @NgModule({
    imports: [
    CollapseModule.forRoot()
    ]
  })