Custom Expand/Collapse mat-card with ngStyle,CSS

Custom Material Card expand/collapse

After clicking down arrow -->

After clicking down arrow again, show 1st screen.

Prerequisites:

@angular/material v8.2.3

1. Container component - html

<div style="height: 33vh;"  fxLayout="row" fxLayoutAlign="center center">
        <p> Some component....</p>
</div>
<jhi-your-card></jhi-your-card>

2. Card component - html

<div  [ngStyle]="myCardStyle" class="main-container" style="color: #1f69c0">

    <mat-card>

        <div>

            <div *ngIf="isExpanded" fxLayout="row" fxLayoutAlign="start center">

                <button (click)=collapseCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                    <mat-icon>keyboard_arrow_down</mat-icon>

                </button> Close

            </div>

            <div class="some-label">

                Label 1

            </div>

            <div fxLayout="row" fxLayoutAlign="start center" class="margin">

                <div class="comp-stuff" fxFlex="80" style="color: #1f69c0">

                    Component stuff

                </div>

            </div>

            <div *ngIf="!isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me

                    </button>

                </div>

            </div>

        </div>

        <br/>

        <div *ngIf="!isExpanded" fxLayout="row" fxLayoutAlign="center center">

            <button (click)=expandCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                <mat-icon>keyboard_arrow_down</mat-icon>

            </button>

        </div>

    </mat-card>

</div>

3. Card component - css 

.main-container {
  padding: 5px;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}
.full-width {
  width: 100%;
}
.button-margin {
  margin-right: 1.5vh;
}
mat-icon {
  margin-left: 1vw;
  margin-top: 1vw;
  font-size: 2.5vh;
}
mat-card {
  background-color: white;
  width: 95%;
  margin-bottom: 11vh;
  padding: 3.5vh;
}
.some-label {
  font-size: 2.08vh;
  color: lightgray;
}
.mat-button {
  background-color: darkgray;
  border-radius: 20px;
}
.comp-stuff {
  font-size: 4.48vh;
}
.bottom-links {
  font-size: 2.08vh;
  color: white;
}
.margin {
  margin-bottom: 1.5vh;
}
button {
  overflow-x: hidden !important;
}

4. Card component - ts

import {Component, OnInit} from '@angular/core';

@Component({

  selector: 'jhi-your-card',

  templateUrl: './your-card.component.html',

  styleUrls: ['./your-card.component.scss']

})

export class YourCardComponent implements OnInit {

  public myCardStyle = {};

  isExpanded = false;

  expandedCardStyle = {

    ['position']: 'absolute',

    ['z-index']: '10',

    ['top']: '0',

    ['left']: '0',

    ['width']: '100%',

    ['height']: '90%'

  };

  constructor() {}

  ngOnInit(): void {}

  expandCard(): void {

    this.myCardStyle = this.expandedCardStyle;

    this.isExpanded = true;

  }

  collapseCard(): void {

    this.myCardStyle = {};

    this.isExpanded = false;

  }

}