CODEWITHSUNDEEP
jqueryangulartypescript
Richard77
Richard77

Reputation: 21661

How to trigger bootstrap collapse in Angular 2/Typescript

Let's say I've this panel. I want to be able to expend/collapse it, depending on the selected value of a dropdownlist.

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

This is the 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 is the event handler. And, if a state is selected, expends the panel. Otherwise, collapse the panel.

//Events
onChange(id: string, deviceValue: string) {
     if (id == "state") {
        if (deviceValue) {
            //expend the panel...
        }
        else{
            //collapse the panel...
        }
     }
}

using Jquery, I could just do something like: $("#collapseExample").collapse();.

How to get the samething in Angular/Typescript?.

Upvotes: 4

Views: 12922

Answers (2)

SimoneMSR
SimoneMSR

Reputation: 486

Bootstrap 5 will show div if you add in and show class and it will hide the div when these classes are removed.

This worked for me.

<div class="collapse" id="collapseExample" [ngClass]="{'in': isOpen, `show` : isOpen}">
    <div class="well">
        ...
    </div>
</div>

Upvotes: 0

Sangram Nandkhile
Sangram Nandkhile

Reputation: 18202

The bootstrap will show div if you add in class and it will hide the div when in class is removed.

The basic solution looks something like this.

<div class="collapse" id="collapseExample" [ngClass]="{'in': isOpen}">
    <div class="well">
        ...
    </div>
</div>

add a boolean variable to your class.

isOpen: boolean;

and set it according to your business constraints. 

 onChange(id: string, deviceValue: string) {
              if (id == 'state') {
                  if (deviceValue) // {
                      //expand the panel...
                      this.isOpen = true;
                  }
                  else {
                      //collapse the panel...
                      this.isOpen = false;
                  }
              }
          }

However, I would advice you o create a custom directive which can be implemented throughout the solution and you can avoid writing [ngClass]="isOpen ? 'in' : ''" everwhere. You can use your own directive such as

<div class="collapse" id="collapseExample" [btCollapse]="isOpen">

Update: with support for animation.

<div id="demo" class="block" [style.height]="height + 'px'" #my>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do 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 a new variable in class.

height = 0;

onChange(id: string, deviceValue: string, height: number) {

      if (id == 'state') {
          if (deviceValue == '1') {
              //expand the panel...
              this.height = height;
          }
          else {
              //collapse the panel...
              this.height = 0;
          }
      }
  }

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

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

Upvotes: 6

Related Questions