How to Collapse / Expand a Bootstrap Collapse programmatically?

Question

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

For example imagine this is in app.component.html in the Angular project.

There is a variable called showMenu in app.component.ts

let showMenu: boolean;

I want the above div to collapse when showMenu is false and expand when showMenu is true.

Is this possible?

Answer 1

I believe your best bet is to swap the showMenu variable with a function that you can call when you change the value. I realize that may not be ideal so your other option is to implement ngOnChanges() like so:

ngOnChanges(changes) {
  if (this.showMenu) {
    $('#demo').collapse('show');
  } else {
    $('#demo').collapse('hide');
  }
}

Remember to import and add ngOnChanges to your class too.

Answer 2

Use ngClass like shown below to achieve the desired effect.

<div id="demo" class="collapse" [ngClass]="{'show': showMenu}">
    Lorem ipsum dolor text....
</div>

The collapse is actually adding/removing the 'show' class internally to hide/show the element. You can do the same using angular like above.