Components: Md-Checkbox has no margin when using dynamic label after #2121

[w3t]

Bug, feature request, or proposal:

After upgrading to material 2.0.0-beta5, checkboxes on my login screen no longer have margin on their right.

Apparently due to this change:
https://github.com/angular/material2/pull/2121

and to the fact I use dynamic labels (translated by ngx-translate to be precise).

I use something like that:
{{ "tx_Login_SavePassword" | translate }}

What is the expected behavior?

To have margin (space between the checkbox and its label) on the right of the checkbox (no mat-checkbox-inner-container-no-side-margin class)

What is the current behavior?

The class mat-checkbox-inner-container-no-side-margin is added to the checkbox when rendering the form. it only disappears when one clicks on the checkbox.

What are the steps to reproduce?

Here is the Plunker reproducing the problem (without ngx-translate but using a simple settimeout instead):

https://plnkr.co/5CFp9x

What is the use-case or motivation for changing an existing behavior?

Working as it was in previous 2.0.0-beta

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 2.0.0-beta5

Is there anything else we should know?

Don't think so but please ask if I forgot something

[kgrvr]

Same issue here too.
Material adds following class when using translate pipe:
.mat-checkbox-inner-container-no-side-margin { margin-left: 0; margin-right: 0; }
Any fix for this, apart from overriding this class?

[andreasrueedlinger]

@andrewseguin I don't think the issue is completely fixed.
I have the same issue using my own custom component with nested markup and a translate pipe. Here is stackblitz to reproduce the issue:
https://angular-material2-issue-r22sfw.stackblitz.io

Somehow the markForChecked is not called and thus the class is first removed after interacting with the UI in some other way.

[kaelumania]

Same issue here, any proposed workarounds?

[andreasrueedlinger]

@andrewseguin @DevVersion Could you please re-open the issue as the problem still exists?

[devversion]

@andreasrueedlinger Thanks for the ping. I will have a look later this day and re-open if I can reproduce it.

[kaelumania]

Sorry forgot to append my sample:

<section class="mat-form-field">
  <mat-checkbox [(ngModel)]="devMode">
    {{'APP.SETTINGS.DEVMODE' | translate }}
  </mat-checkbox>
</section>

Seems that the issue is the translate pipe.

[andreasrueedlinger]

@DevVersion I created a new working stackblitz here: https://angular-material2-issue-z8w4ml.stackblitz.io

[matze1234]

This seems to be still an issue in @angular/material 7.3.6.
I've worked around it by appending an nbsp to the dynamic label.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}