Translate pipe not working in angular material dialog

Question

I'm quite new in Angular. I looked for answers in doc and stackoverflow but I haven't found it. So, sorry if my question is obvius.

I created a component to hold my modal content in a separated file. I open this modal using open.dialog like this from parent component:

  openMyModalDialog() {
    const dialogRef = this.dialog.open(MyModalComponent, {
      panelClass: 'own-modal',
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      alert('closed');
    });
  }

Well, MyModalComponent:

<h1 mat-dialog-title>{{ 'myTargetTranslateKey' | translate }}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <mat-label>Favorite Animal</mat-label>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
</div>

I don't import TranslateModule in the modal component, because I think that's imported in the module.

...

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    MomentModule,
    IMaskModule,

It's also imported in app.module.ts. using TranslateModule.forRoot().

It's important to say that | translate pipe works in any other components / code, also in the parent which opens the dialog.

Thanks in advance!

UPDATE: I've imported TranslateService from ngx-translate/core in the modal component. I put a console.log on close event, and I can see that this.translateSevice.instant('key') works!... So the problem is the pipe doesn't work.

UPDATE 2: It also works with <h1 mat-dialog-title [translate]="'key'"></h1> but it doesn't with the pipe! :'(

UPDATE 3: Pipe doesn't work means that the result is empty, nothing is displayed but there aren't errors in the console neither.

Hi @dmanso, what do you mean by "not working" - text is not being translated, or you get an error the pipe 'translate' could not be found? — Anton Temchenko
@AntonTemchenko sorry, I'm gonna edit the question right now. The result is empty, but no errors are displayed in the console, neither 'translate' could not be found from which I've been reading. Maybe, another clue, I'm having also problems (I work with Material Angular) injecting data to a dialog. I can't see in the template, but I see the data injected if I console.log. — dmanso

dmanso dmanso · Accepted Answer · 2020-05-06T13:58:37

I found the error. Sorry for this novice error.

The example I've copied from angular-material doc has an inner component (mat-form-...) which is not imported and I don't use.

No error messages, nothing. I remove it and everything works fine.

Thanks.

Translate pipe not working in angular material dialog

1 Answers