(Material Tab Group) Custom Expand/Collapse mat-card

Custom Expand/Collapse mat-card (Mat-tab-group case)

After clicking down arrow:

After clicking down arrow again, show 1st screen.

Prerequisites:

@angular/material v8.2.3

1. Container component - html

 <mat-tab-group mat-stretch-tabs [dynamicHeight]="true" [backgroundColor]="'#fff'">

    <mat-tab label="Tab 1">
        Content 1 <br><br><br> some content...
    </mat-tab>
    <mat-tab label="Tab 2">
        <some-component></some-component>
        <jhi-your-card></jhi-your-card>
    </mat-tab>
</mat-tab-group>

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 *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 1

                    </button>

                </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 2

                    </button>

                </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 3

                    </button>

                </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 4

                    </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;

  width: 100%;

}

div.card-content {

  overflow: hidden;

}

.full-width {

  width: 100%;

}

.button-margin {

  margin-right: 1.5vh;

}

mat-icon {

  margin-left: 1vw;

  margin-top: 1vw;

  font-size: 2.5vh;

}

mat-card {

  margin-left: 1.5vw;

  background-color: white;

  width: 97%;

  margin-bottom: 11vh;

  padding: 3.5vh;

  overflow: scroll;

}

.free-money-label {

  font-size: 2.08vh;

  color: lightgray;

}

.mat-button {

  background-color: darkgray;

  border-radius: 20px;

}

.jhi-last-transaction-entry {

  padding-top: 1.56vh;

  padding-bottom: 1.56vh;

  margin-bottom: 1.5vh;

  margin-top: 1.5vh;

}

.transactions-button {

  font-size: 2.08vh;

  color: #ea485d;

}

.arrow-button {

  img {

    width: 5vw;

    height: 5vw;

  }

}

.free-money {

  font-size: 4.48vh;

  color: #ea485d;

}

.bottom-links {

  font-size: 2.08vh;

  color: white;

}

.margin {

  margin-bottom: 1.5vh;

}

button {

  overflow-x: visible !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']: 'fixed',

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

    ['top']: '0',

    ['margin-top']: '13vh',

    ['left']: '0',

    ['width']: '100%',

    ['height']: '80%',

    ['overflow']: 'scroll'

  };

  constructor() {}

  ngOnInit(): void {}

  expandCard(): void {

    this.myCardStyle = this.expandedCardStyle;

    this.isExpanded = true;

  }

  collapseCard(): void {

    this.myCardStyle = {};

    this.isExpanded = false;

  }

}