Translate pipe fails within aria-label in Angular Material Design

Question

Maybe a trivial question but I've not been able to find any answer googling around.

In my Angular 5 app I've HTML like this:

<button mat-raised-button color="accent" class="submit-button" aria-label="{{'REGISTER.CREATE' | translate}}"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

which produces the following error:

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'aria-label' since it isn't a known property of 'button'. ("             </div>

                <button mat-raised-button color="accent" class="submit-button" [ERROR ->]aria-label="{{'REGISTER.CREATE' | translate}}"
                        [disabled]="registerForm.inval"): ng:///Register2Module/FuseRegister2Component.html@76:79
syntaxError

But if I write:

<button mat-raised-button color="accent" class="submit-button" aria-label="SOME DIRECT TEXT"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

I have no error at all.

This is beyond my understanding. Is this a problem with angular's implementations of Google's MAT or am I missing something?

Thank you in advance

how about you remove `{{ }}` and just `'REGISTER.CREATE' | translate` — Tin, May 02 '18 at 17:25
@Tin Thanks Tin but it doesn't work. The compiler doesn't complain but the output text doesn't get translated at all. It is exactly like writing SOME.DIRECT.TEXT — , May 03 '18 at 18:23
Hey @Raffaele I don't know if you already got the answer. I found this https://stackoverflow.com/questions/42658800/how-to-bind-dynamic-data-to-aria-label. This is exactly what you want. `attr.aria-label="{{'REGISTER.CREATE' | translate}}"` — Tin, May 03 '18 at 19:01
@Tin It works, thanks. If you post your comment as an answer I will mark it as the accepted one. — , May 04 '18 at 08:53

score 23 · Accepted Answer · answered May 05 '18 at 00:20

23

Add attr. like the following:

attr.aria-label="{{'REGISTER.CREATE' | translate}}"

Reference: How to bind dynamic data to ARIA-LABEL?

answered May 05 '18 at 00:20

Tin

794
5
10

score 0 · Answer 2 · answered Jan 21 '19 at 23:41

and if the value from *ngFor , you need to remove ''

      <mat-nav-list dir="rtl" *ngIf="(categories$ | async) as categories">
    <a mat-list-item *ngFor="let category of categories" 
     attr.aria-label="{{category.name | translate}}"
     (click)="onSidenavCloseClick()" [routerLink]="category.link"
      routerLinkActive="active">
      {{category.name | translate}}
    </a>
  </mat-nav-list>

Translate pipe fails within aria-label in Angular Material Design

2 Answers2