CODEWITHSUNDEEP
htmlangularangular-material
Juanker
Juanker

Reputation: 794

Angular Material, make <mat-chip> clickable

I am using mat-chips from material.angular.io

<mat-chip-list class="categories">
    <mat-chip><a href="/publication/category/{{category.id}}">
    {{category.name}}</a></mat-chip>
</mat-chip-list>

If I click with the center button of the mouse the link works and opens another tab, but I can not open the link with left click.

I tried with class="link-overlapping", but still does not working.

Upvotes: 1

Views: 6175

Answers (3)

Rom1
Rom1

Reputation: 386

I suggest this way

<mat-chip><a routerLink="/test" class="mat-standard-chip" style="margin:0; padding:0;">My link</a></mat-chip>

So that link is displayed at the bottom left of the screen when mouse is hovering.

Upvotes: 0

mtpultz
mtpultz

Reputation: 18288

You don't need the anchor at all you can just use routerLink directly on mat-chip:

<mat-chip-list class="categories">
  <mat-chip [routerLink]="['publication/category', category.id]">
    {{category.name}}
  </mat-chip>
</mat-chip-list>

Upvotes: 6

stojevskimilan
stojevskimilan

Reputation: 1030

Did you try with routerLink? it works for me.

  <mat-chip-list class="categories">
      <mat-chip><a [routerLink]="['/your_path']">{{ data }} </a></mat-chip>
    </mat-chip-list>
  </div>

Upvotes: 1

Related Questions