Double template search in angular-CodePudding

On one hand, I have a list of links that gets displayed as follows

<mat-nav-list>
  <mat-list-item *ngFor="let link of links">
    <a matLine href="{{link.url}}"> {{ link.label }} </a> 
  </mat-list-item>
</mat-nav-list>

in the *.ts:

class SideNavItem {
  label: string;
  url: string;
}
[...]
this.links = [ { label: "users", url:"users"},  { label: "tickets", url:"tickets"}];

On the other hand, I have been using '@ngx-translate/core' for the translation, and I use it as follows:

<mat-card-header>
  <mat-card-title>{{'cards.title'|translate}}</mat-card-title>
</mat-card-header>

But now, I want to use my translate module for the list item labels. I am trying to combine both interpolations, something like <a matLine href="{{link.url}}">{{ {{link.label}} | translate }}</a> , but this is throwing an error saying that it is a syntax error.

Any ideas how to interpolate twice?

CodePudding user response：

You're already within angular when you're using {{ ... }}. Like the example where you have it working just add | translate in the dom like so:

<a matLine href="{{link.url}}"> {{ link.label | translate }} </a>