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?

Answer 1

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'
  }
}