How to toggle Angular Material mat-card to full screen

Question

I'm trying to emulate a portal style page using Angular Material, that shows a grid of cards, and each card should be expandable to take up the container (i.e. most of the visible page). All the other cards are covered (not visible) when 1 card is expanded. The cards have state/data, which is mostly contained in the card's component currently.

I'm looking for a good design to support this. My initial thought was that I could use the same component in two places, once as full screen, once as the content of a card, combined with ngIf to show or hide the components. But I think for this to work, I would have to keep the data outside of the components, in services, and I was trying to avoid making this change. Any suggestions appreciated.

Answer 1

I spent some time working on it and an easy solution is to toggle an additional class on the card based on some condition. I.e.:

<mat-card [ngClass]="{'fullscreen': isCardExpanded}"></mat-card>

.mat-card {
  position: fixed;
  transition: all 1s linear;
}

.fullscreen {
  background-color: red;
  width: 100%;
  height: 100%;
}

Have a look at this working demo.

Answer 2

I think you should create a template card and bind selected card data to it. demo

Answer 3

This is a pure CSS method

<mat-card class="card">

In your CS file include

.card{
  position:fixed;
  min-height:100%;
  max-height:100%;      
 }