<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?
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.
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.
Looking for the same answer I got to this:
ngOnChanges(changes) {
$('#demo').collapse('toggle');
}
Enjoy!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.