如何使用角度2展开/折叠自举卡？

Question

我正在尝试扩展和折叠自举卡，所以我有四张卡，现在用户想要扩展卡以覆盖全屏以使更多可见其他卡不应该可见，然后将其折叠回原始样式。以下编码它的exapanding只是div与图标卡标题和内容不扩展，如何使用angular2实现该任务？

app.component.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

app.component.ts

 <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.css

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