Can we use Mat-card with Anchor Tag?

Question

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>

What do you mean by the link cursor? Do you mean `cursor: pointer`? — nash11, Sep 20 '19 at 05:07

ARMUGHAN ALI · Answer 1 · 2021-05-15T15:14:33.217

6

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

edited May 15 '21 at 15:14

answered May 15 '21 at 15:09

ARMUGHAN ALI

339
3
5

1

This is the best solution in the universe. – Muhammad bin Yusrat Jan 06 '22 at 06:44

score 1 · Answer 2 · answered Sep 20 '19 at 05:08

1

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

answered Sep 20 '19 at 05:08

Akber Iqbal

14,487
12
48
70

you're right, the example I used had buttons, but the questioner wants to use only content, no `` – Akber Iqbal Sep 20 '19 at 05:15
For me anchor tag worked without removing the styling inside the mat-card tag. – Sami-L Nov 12 '21 at 11:50

score 0 · Accepted Answer · answered Sep 20 '19 at 05:12

HTML

<mat-card (click)="redirect(100)"> 
    <mat-card-content> 
        <div> $100 </div> 
        <div> 3000 ETB</div>
    </mat-card-content> 
</mat-card>

<mat-card (click)="redirect(200)"> 
    <mat-card-content> 
        <div> $200 </div> 
        <div> 4000 ETB</div>
    </mat-card-content> 
</mat-card>

CSS

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

TS

redirect(id) {
    alert('Called from ' + id);
  }

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

Can we use Mat-card with Anchor Tag?

3 Answers3