CODEWITHSUNDEEP
cssangulartypescriptangular-materialmat-card
Clickmit Wg
Clickmit Wg

Reputation: 553

Can we use Mat-card with Anchor Tag?

I want to make mat-card to be clickable and when I hover over the mat-card I wanted to show link cursor. There are many cards when I click on one of the cards I want to navigate to another page. How Can I achieve this?

Is it appropriate to use the following code in my template html.

<a mat-card   routerLink= ...>  Buy  </a>

My first attempt was

        <div fxLayout="row rap">
           <mat-card> 
                <mat-card-content> 
                   <div> $100 </div> 
                   <div> 3000 ETB</div>
               </mat-card-content> 
           </mat-card>
        <mat-card> .... </mat-card>
     </div>

Upvotes: 2

Views: 3844

Answers (3)

Sudipto Mukherjee
Sudipto Mukherjee

Reputation: 945

HTML

<ng-container *ngFor="let movie of movieList">
  <mat-card [routerLink]="'/movies/' + movie.name">
    <mat-card-content>
      <div>{{ movie.name }}</div>
      <div>{{ movie.price }}</div>
      <div>{{ movie.release }}</div>
    </mat-card-content>
  </mat-card>
</ng-container>

But if you have control over the looped object you can directly add a property that has the url you want to redirect to. Something like

<ng-container *ngFor="let movie of movieList">
  <mat-card [routerLink]="movie.url">
    <mat-card-content>
      <div>{{ movie.name }}</div>
      <div>{{ movie.price }}</div>
      <div>{{ movie.release }}</div>
    </mat-card-content>
  </mat-card>
</ng-container>

CSS

mat-card {
  cursor: pointer;
  margin-bottom: 1rem;
}

Working Solution : https://stackblitz.com/edit/angular-fcexmz

Upvotes: -1

ARMUGHAN ALI
ARMUGHAN ALI

Reputation: 379

<a *ngFor="let card of childCards" [routerLink]="[card?.targetUrl]"> Write mat card code inside anchor tag.

Upvotes: 6

Akber Iqbal
Akber Iqbal

Reputation: 15031

Why not wrap the mat-card in a <a> but sure to remove the underline styling on it

relevant HTML:

<a class='removeStyle' href='#'>
    <mat-card class="example-card">
    ....
    </mat-card>
</a>

relevant CSS:

.removeStyle{
  text-decoration: none;
}

complete working stackblitz here

Upvotes: 1

Related Questions