Angular Material outlined input and ngx-translate

Question

I have an Angular app ^6.0.0 with Angular Material ^6.0.2 and ngx-translate ^10.0.2.

In my app, I have some mat-inputs with appearance="outline". Whenever I change the language of the app, the input label truncates with the field outline, as in the screenshot below.

If I refresh the page the outline takes the width of the current language and it works as is should.

Is there any way to refresh/rebuild only the inputs when I change the language, without having to refresh the page?

Thanks!

Label normal in french:

Label truncates with outline in English:

Please try to provide relevant sample code so people can help you better — Omar Gonzalez
Hi Omar, thanks for the reply. I've added a stackblitz example of the problem:Stackblitz The app starts in english. If you click the FR button on the top right and then select the input you'll be able to see the problem with the label. — Rodrigo Degani

G. Tranter G. Tranter · Accepted Answer · 2018-08-14T19:38:59

MatFormField provides a function for this - updateOutlineGap(). You can call the function after changing the language using a timeout:

Template:

<mat-form-field appearance="outline" #formField="matFormField">
    <mat-label>{{ 'search' | translate }}</mat-label>
    <input matInput placeholder="Favorite food">
</mat-form-field>

Component:

@ViewChild('formField') formField: MatFormField;

changeToFr() {
    this.translate.use('fr');
    setTimeout(() => this.formField.updateOutlineGap());
}

Here is your example on Stackblitz updated: https://stackblitz.com/edit/angular-material2-translate-issue-1uamsu.

Angular Material outlined input and ngx-translate

1 Answers