jquery - How to trigger bootstrap collapse in Angular 2/Typescript -

let's i've panel. want able expend/collapse it, depending on selected value of dropdownlist.

<div class="collapse" id="collapseexample">     <div class="well">         ...     </div> </div> 

this dropdownlist.

<select id="state" name="state"         [(ngmodel)]="stateid"             (change)="onchange($event.target.id, $event.target.value)"         class="form-control">         <option *ngfor="let r of stateslist"             value="{{ r.id }}">{{ r.name }}         </option> </select> 

this event handler. and, if state selected, expends panel. otherwise, collapse panel.

//events onchange(id: string, devicevalue: string) {      if (id == "state") {         if (devicevalue) {             //expend panel...         }         else{             //collapse panel...         }      } } 

using jquery, like: $("#collapseexample").collapse();.

how samething in angular/typescript?.

the bootstrap show div if add in class , hide div when in class removed.

the basic solution looks this.

<div class="collapse" id="collapseexample" [ngclass]="{'in': isopen}">     <div class="well">         ...     </div> </div> 

add boolean variable class.

isopen: boolean; 

and set according business constraints.

 onchange(id: string, devicevalue: string) {               if (id == 'state') {                   if (devicevalue) // {                       //expand panel...                       this.isopen = true;                   }                   else {                       //collapse panel...                       this.isopen = false;                   }               }           } 

however, advice o create custom directive can implemented throughout solution , can avoid writing [ngclass]="isopen ? 'in' : ''" everwhere. can use own directive such as

<div class="collapse" id="collapseexample" [btcollapse]="isopen"> 

update: support animation.

<div id="demo" class="block" [style.height]="height + 'px'" #my>     lorem ipsum dolor sit amet, consectetur adipisicing elit,     sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   </div>  <select id="state" name="state"         [(ngmodel)]="stateid"             (change)="onchange($event.target.id, $event.target.value, my.scrollheight)"         class="form-control">         <option *ngfor="let r of stateslist"             value="{{ r.id }}">{{ r.name }}         </option> 

component.ts declare new variable in class.

height = 0;  onchange(id: string, devicevalue: string, height: number) {        if (id == 'state') {           if (devicevalue == '1') {               //expand panel...               this.height = height;           }           else {               //collapse panel...               this.height = 0;           }       }   } 

don't forget add style in inline component style or in shared css file.

styles: [`     .block {       overflow: hidden;       -webkit-transition: height .5s;       transition: height .5s;     }   `]