How do I remove ws:nowrap from mat-slide-toggle in Angular Material?

Question

When using mat-slide-toggle, Angular Material adds a white-space: no wrap style(plus others) that I can't overwrite from the component scss file.

The style is added to both .mat-slide-toggle and .mat-slide-toggle-content. How can I overwrite those without going global?

Than you

score 0 · Answer 1 · answered Aug 19 '20 at 18:21

0

In your scss file

:host {
  ::ng-deep {
    .mat-slide-toggle {
      white-space: normal !important;
    }
  }
}

answered Aug 19 '20 at 18:21

Bogdan Chereghi

Isn't ng-deep being removed? Will there be an alternative? – orbitory Aug 23 '20 at 19:26
@orbitory https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep Accepted answer. I've been searching for a replacement too, but sadly it doesn't exist. I read about something similar called `slotted`, it's not yet available though – Bogdan Chereghi Aug 25 '20 at 06:12

score 0 · Answer 2 · answered May 27 '21 at 04:21

0

This work for me (angular 11)

::ng-deep .mat-slide-toggle-content {
  white-space: normal !important;
}

answered May 27 '21 at 04:21

Miguel Carrasco

2 Answers2