Binding On Click Function Angular 2

Question

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.

You said you used ng2-bootstrap in the original app. So you aren't in the new one? I never used ng2-bootsrap, but I'm willing to bet that collapse is a directive from that library. You would need to grab that from the library, or if you can't use the library, create your own collapse directive — Paul Samsotha
– Paul Samsotha, Commented Oct 29, 2016 at 0:25
You are very right. I just found an example online of someone making a collapse div and in the example he creates a directive. So your assumption must be correct. Learning experience. Do you think its better to write the directive or use the library? For the apps overall performance do you think it makes a difference? — wuno
– wuno, Commented Oct 29, 2016 at 0:28

Ben Richards · Accepted Answer · 2016-10-29 00:28:40Z

2

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.

answered Oct 29, 2016 at 0:28

Ben Richards

3,5861 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding On Click Function Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related