CODEWITHSUNDEEP
angularangular-materialmaterial-design
Demian Licht
Demian Licht

Reputation: 167

Multiple images in mat-card

So I have a mat-tab-group which in turn displays a single mat-card for each tab. Each card represents a hotel room.

I would like to somehow display several images in the image part of the mat-card, as a gallery of sorts. Are there any ways to do this?

Here's my current HTML template:

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{room.name}}</mat-card-title>
    <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      {{room.details}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button>Book</button>
    <button mat-button>Share</button>
  </mat-card-actions>
</mat-card>

Upvotes: 0

Views: 3221

Answers (1)

G. Tranter
G. Tranter

Reputation: 17938

The mat-card-image directive can be applied to other elements besides img. It is used for nothing more than stretching the item to full width. So you could create a component that provides your 'gallery' experience, and use that instead of the img:

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{room.name}}</mat-card-title>
    <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
  </mat-card-header>
  <my-image-gallery mat-card-image></my-image-gallery>
  <mat-card-content>
    <p>
      {{room.details}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button>Book</button>
    <button mat-button>Share</button>
  </mat-card-actions>
</mat-card>

Or just use your component and handle sizing yourself - don't bother with the directive.

Upvotes: 1

Related Questions