I am attempting to build a flexible layout grid component using mat-cards in Angular as shown below:
<div
fxLayout.xs="column"
fxLayout="row wrap"
fxLayoutGap="10px"
ngClass.gt-xs="ml-10"
>
<app-card
fxFlex.sm="0 1 calc(50%-10px)"
fxFlex.md="0 1 calc(33%-10px)"
fxFlex.gt-md="0 1 calc(25%-10px)"
*ngFor="let cardModel of apodCards$ | async"
[cardModel]="cardModel"
>
</app-card>
</div>
This is how it appears : https://i.sstatic.net/wSL6P.jpg
When I use the html template from my app-card component like this:
<div
fxLayout.xs="column"
fxLayout="row wrap"
fxLayoutGap="10px"
ngClass.gt-xs="ml-10"
>
<mat-card
fxFlex.sm="0 1 calc(50%-10px)"
fxFlex.md="0 1 calc(33%-10px)"
fxFlex.gt-md="0 1 calc(25%-10px)"
*ngFor="let cardModel of apodCards$ | async"
class="example-card"
>
<mat-card-header>
<mat-card-title>{{ cardModel.title }}</mat-card-title>
<mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
<ng-content></ng-content>
<mat-card-content>
<p [innerHTML]="cardModel.description"></p>
</mat-card-content>
<mat-card-actions>
<app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
</mat-card-actions>
</mat-card>
</div>
It looks like this : https://i.sstatic.net/XIAmF.jpg
Is there a way to make my app-card component resemble the second image?
I attempted to modify the app-card component like this:
<mat-card
fxFlex.sm="0 1 calc(50%-10px)"
fxFlex.md="0 1 calc(33%-10px)"
fxFlex.gt-md="0 1 calc(25%-10px)"
class="example-card"
>
<mat-card-header>
<mat-card-title>{{ cardModel.title }}</mat-card-title>
<mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
<ng-content></ng-content>
<mat-card-content>
<p [innerHTML]="cardModel.description"></p>
</mat-card-content>
<mat-card-actions>
<app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
</mat-card-actions>
</mat-card>
And then including it in the grid component like so:
<div
fxLayout.xs="column"
fxLayout="row wrap"
fxLayoutGap="10px"
ngClass.gt-xs="ml-10"
>
<app-card
*ngFor="let cardModel of apodCards$ | async"
[cardModel]="cardModel"
>
</app-card>
</div>
Unfortunately, I had no success with this approach.
Edit: See Stackblitz
<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
<!-- This doesn't work, maybe I need to apply flex to the custom CardComponent somehow? -->
<app-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)"
*ngFor="let card of cards;" [card]="card">
</app-card>
<!-- This works -->
<!-- <mat-card *ngFor="let card of cards;" fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)"
fxFlex.gt-md="0 1 calc(25%-10px)">
<mat-card-title>{{card.name}}</mat-card-title>
<img mat-card-image src="{{card.picture.uri}}" class="image">
<mat-card-content>{{card.description}}</mat-card-content>
<mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
</mat-card> -->
</div>