CODEWITHSUNDEEP
jquerytwitter-bootstrapangular
wuno
wuno

Reputation: 9875

Binding On Click Function Angular 2

I am porting in some components from another app which was build with angular-cli to a mean stack app. There are some collapsable cards in the original app and when I move them over with their respective functions to watch for when they are expanded or collapsed I get this error,

Can't bind to 'collapse' since it isn't a known property of 'div'. ("btn-block responsive-width" (click)="isCollapsed = !isCollapsed">§ 601 Short title ][collapse]="isCollapsed" class="card card-block card-header">

In the component.html file this is the onClick function

<button type="button" class="building btn btn-info btn-primary btn-default btn-lg btn-block responsive-width" (click)="isCollapsed1 = !isCollapsed1">§ 602 Congressional findings and statement of purpose</button>
            <div [collapse]="isCollapsed1" class="card card-block card-header">

and in the component.ts file I have a boolean to check for its state,

export class FcraComponent {

  constructor() { }
  public isCollapsed:boolean = true;

I used ng2-bootstrap in the original app and in this app I imported bootstrap core files and added them to the index file. So the css is working but for some reason I cant bind this to the div.

Please explain to me why this wont work without ng2 and how to fix it.

Upvotes: 1

Views: 809

Answers (1)

Ben Richards
Ben Richards

Reputation: 3575

This error: Can't bind to 'collapse' since it isn't a known property of 'div'. means that Angular doesn't know how to bind to "collapse" because it's not a native HTML property, and there is nothing defined in your code that says how to process that. Like the comment above said, you need to either create a Angular 2 directive that understands how to deal with the collapse property or import the directive from another place.

Upvotes: 2

Related Questions