CODEWITHSUNDEEP
angular-material
LeO
LeO

Reputation: 5238

Angular Material: How to combine ngIf, aria-label and i18n?

I have the following compontent

<mat-form-field>
   <mat-placeholder i18n="@@Title4Version">Title for version</mat-placeholder>
   <input matInput [(ngModel)]="workflowInfo.title" readonly [readOnly]="lockTitle">
   <button mat-button matSuffix mat-stroked-button aria-label="Unlock" (click)="lockTitle=!lockTitle">
        <ng-container *ngIf="lockTitle; else unlocked">
          <mat-icon>lock_open</mat-icon>
        </ng-container>
        <ng-template #unlocked>
          <mat-icon>lock</mat-icon>
        </ng-template>
   </button>
</mat-form-field>

Which looks like the following screen shot:

enter image description here

My question: Is it possible to

  1. Click on the lock button and enable the editing AND
  2. have the aria-label accordingly set (i.e. either 'Unlock' or 'Lock') AND
  3. have this label as well ready for i18n

I have an idea how to accomplish question 1 but how to have the other 2 options as well? Is it possible to have them all in one template? If not how to split them up properly (without code duplication)?

Upvotes: 1

Views: 4807

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

You already have most of the code in place - just bind the aria-label attribute to an expression:

[attr.aria-label]="lockTitle ? 'Unlock' : 'Lock'"

And you appear to already be using template translations so you can probably use the translate attributes feature: https://angular.io/guide/i18n#translate-attributes.

i18n-aria-label

Upvotes: 3

Related Questions