Suppression dynamique de la classe "in" dans l'accordian bootstrap lorsque vous cliquez sur le bouton

Question

Lorsque vous cliquez sur le bouton, la classe "in" de l'élément div doit être supprimée dynamiquement.

<div class="container"> 
    <h2>Simple Collapsible</h2> 
    <p>Click on the button to toggle between showing and hiding content.</p> 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
    <div id="demo" class="collapse in"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. 
    </div> 
</div> 

Answer 1

Vous pouvez attribuer une valeur booléenne dans app.component.ts et lorsque le bouton est cliqué sur le changement de la valeur entre true ou false

<button (click)="isVisible = !isVisible">Toggle</button> 

puis dans le div ajoutez le

suivant

<div id="demo" [ngClass]="{'in': isVisible}" class="collapse">