How to expand/collapse bootstrap cards using angular 2?

Question

I am trying to expand and collapse bootstrap cards, so i have four cards and now user want to expand card to cover full screen to make more visible other cards should not be visible and then collapse it back to original style.With below code its exapanding just the div with icon card header and content is not expanding, How to achieve that task using angular2 ?

app.component.html

 <div class="card card-outline-info" >
      <div class="card-header bg-info"><h5>Detail</h5><span class="pull-right panel-fullscreen_1 fa fa-compass" [ngClass]="{'expandWidget':isClassExpanded}"(click)="onClickMe($event)"style="font-size:25px"></span></div>
      <div class="card-block">
            <p>Some text</p>
        </div>
      </div>

app.component.ts

onClickMe(ev) {
       this.isClassExpanded = ! this.isClassExpanded;
    }

app.component.css

.expandWidget {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}