feat(mat-slide-toggle): setting to justify component (label and switch) using full width

[kimberg]

Feature Description

Provide a property or other setting to expand a slide-toggle to fill its horizontal width, so that the label is left-aligned and the switch is right-aligned (for LTR languages).

Use Case

When you have a slide-toggle with a label on the left, it's common, especially in narrow settings panels, so have the label left aligned and the switch itself right-aligned (for LTR languages). So if you have a panel with a bunch of settings, you'd have the labels all left-aligned and all the switches in the same position on the right.

This doesn't seem to be possible with mat-slide-toggle, without reliance on internal implementation details. Currently, even if the mat-slide-toggle is very wide, the label and switch will be packed to the left.

Here are a few examples of the layout I'd like to be able to achieve:

• All of the examples on https://material.io/components/switches
• https://photos.google.com/settings
• Chrome settings (e.g., chrome://settings/appearance and I think wherever else switches are used)
• Android settings, I think pretty much wherever this kind of switch is used.
• https://docs.google.com (go to settings)
• https://myaccount.google.com/contacts

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[domsew]

This doesn't seem to be possible with mat-slide-toggle, without reliance on internal implementation details.

I can't agree with this sentence. mat-slide-toggle can be used without internal content. What you are talking about is easily achievable with external label. For example:

<span>Your label</span><mat-slide-toggle></mat-slide-toggle>

[kimberg]

That's not really a label, it's just some text that happens to be next to the mat-slide-toggle. If I do it that way, then clicking on the text does not toggle the switch, as it otherwise would. And it defeats the accessibility of the component (although it's possible I could use ariaLabelledBy to work around that).

I don't think this is an unusual use case. Here's a prominent page where this styling is featured:

https://material.angular.io/

[pelord]

Any updates?

[jakehockey10]

There is probably an easier way to do it. But you can try this:

<mat-slide-toggle labelPosition="before">Slide me</mat-slide-toggle>
<mat-slide-toggle labelPosition="before">Slide me too</mat-slide-toggle>

The scss is obviously not great as the developer using material doesn't have control over these class names or internal html structure of the component at runtime (hence why we really shouldn't be using ::ng-deep either).

::ng-deep mat-slide-toggle > .mdc-form-field.mdc-form-field--align-end {
  width: 100%; // Maybe use a  `max-width: 400px;` or something pleasing to you for your fullscreeners ;-)

  label.mdc-label {
    flex: 1;
  }
}

I would really like to see the implementation that gave us the screenshot that is still there on material.angular.io.

[c-sanchez-fd]

This is the styling that worked for me:

  ::ng-deep mat-slide-toggle > .mdc-form-field.mdc-form-field--align-end {
    display: flex;

    label {
      flex-grow: 1;
    }
  }

[bruna-freitas]

using ng-deep is not a solution imo. i'd love to see this implemented