Можем ли мы использовать Mat-card с Anchor Tag?

Question

Я хочу, чтобы мат-карта была кликабельной, а когда я наводил курсор на мат-карту, я хотел показать курсор ссылки.Когда я нажимаю одну из карточек, на которые я хочу перейти на другую страницу, появляется много карточек.Как я могу добиться этого?

Уместно ли использовать следующий код в моем шаблоне html.

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

Моя первая попытка была

        <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>

Answer 1

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);
  }

Рабочий раствор: https://stackblitz.com/edit/angular-zr3tqo

Answer 2

Почему бы не обернуть мат-карту в <a>, но обязательно удалить подчеркивание на ней

релевантно HTML :

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

релевантно CSS :

.removeStyle{
  text-decoration: none;
}

завершено рабочий стек бликов здесь