typescript - Angular palabra clave "as" o cómo usar una variable en html

Uso ngx-translate en Angular 13 y a menudo tengo algo así en HTML

<div> {{ 'prefix.'+'my translation key'+'.suffix' | translate }} </div>

Ahora, la pregunta es que cuando esa traducción está vacía, no quiero mostrar en absoluto el div. Intenté usar este.

<div *ngIf="'prefix.'+'my translation key'+'.suffix' | translate as myText && true"> 
    {{ myText }} 
</div>

pero esto no parece funcionar ni siquiera compilar, probablemente estoy usando mal la palabra clave as. Vea aquí un codepen.

Entonces, mi pregunta es cómo reutilizar los mismos constructos como 'prefix.'+'mi clave de traducción'+'.suffix' | translate como variable en las plantillas HTML de Angular.

También intenté buscar esta palabra clave en la documentación de Angular, pero no encontré esa información.

PD. Después de investigar un poco, parece que cualquier segunda condición en el ngIf rompe la "compilación"

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2 *ngIf="('HOME.TITLE' | translate | uppercase as titlee) && displayTitle">{{ titlee + displayTitle}}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
    </div>
  `,
})
export class AppComponent {
  public displayTitle = true;
  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
}

Respuesta #1

Deberías simplemente invertir el orden de las expresiones. Entonces, en lugar de esto:

<h2 *ngIf="('HOME.TITLE' | translate | uppercase as title) && displayTitle">{{ title }}</h2>

Deberías hacerlo así:

<h2 *ngIf="displayTitle && ('HOME.TITLE' | translate | uppercase) as title">{{ title }}</h2>

Ejemplo funcional