Angular i18n for attributes with select

Question

I have an element I want to translate using i18n from angular. The part that I want to translate is the matTooltip but the value is a select. I know that I have to use i18n-matTooltip to make it work. I should use this syntax <span i18n>The author is {gender, select, male {male} female {female} other {other}}</span> from the docs but I get an error doing so.

Uncaught Error: Template parse errors:
Parser Error: Missing expected : at column 9 in [{section.addTooltip, 
select, test {test} test2 {test2} test3 {test3}}] in 
ng:///AppModule/TestComponent.html@34:72 ("
    </div>

This is what my element looks like:

<button mat-flat-button (click)="click()" 
    [matTooltip]="{section.addTooltip, select, test {test} test2 {test2} test3 
    {test3}}" matTooltipPosition="above" i18n-matTooltip>

Am I missing something?

@can you share your component.ts code? – user2216584 Jun 23 '19 at 19:12 — user2216584, Jun 23 '19 at 19:12

Klaster_1 Нет войне · Answer 1 · 2020-01-17T07:43:56.790

I had exactly the same issue, to interpolate i18n into matTooltip you have to create a hidden HTML element to perform i18n in and pass reference.innerText as tooltip value (found here). This looks like a hack, but Angular Components team has decided not to support ng-template as a valid input value.

Unlike ng-template, the hidden element won't always stay unnoticeable, for example mat-select trigger value uses mat-option's textContent, so if you put tooltip or element with tooltip into mat-option, whole tooltip text will be visible in trigger. This can be worked around with a mat-select-trigger and custom trigger text.

See working example at StackBlitz.

<button
  [matTooltip]='template.innerText'
  (click)='changeValue()'
>Click to change value</button>
Value: {{value}}
<template
  #template
  i18n='@@foo'
>Value is {value, select, true {truthy} false {falsy} }</template>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  value = 'true'
  changeValue() {
    this.value = this.value === 'true' ? 'false' : 'true'
  }
}

Hi. I noticed that the `mat-select` value inserts a `span` in the DOM to represent the `mat-option` value itself. Do I also need to use a `#template` var like your stackblitz sample, or can I use this ICU Select syntax directly `{Gender, select, male {male} female {female} other {other}}` — bob.mazzo, Feb 02 '22 at 17:22

Angular i18n for attributes with select

1 Answers1