[SOLVED] Can we use Mat-card with Anchor Tag?

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>

Solution

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