fieldGroupClassName work without setting encapsulation to be ViewEncapsulation.None

[ron-liu]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior

Given the sample demo here, I noticed we have to set encapsulation: ViewEncapsulation.None to work wiht fieldGroupClassName. While with this setup, it tend to generate unexpected errors when build with production. If we want to avoid unexpected production error, another approach is to move the classes used by fieldGroupClassNamesome global places.

Expected behavior

fieldGroupClassName should work without setting encapsulation: ViewEncapsulation.None

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.0.X 7.1.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] all

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript

• Node (for AoT issues): node --version = 10.11.0

[aitboudad]

well instead of setting encapsulation to none, you can use ::ng-deep selector:

::ng-deep {
  .display-flex { display: flex; }
  .flex-1 { flex: 1; }
  .flex-2 { flex: 2; }
  ...
}

[ron-liu]

Though it will pollute children, it is a lot better than setting encapsulation to none. Fixed my problem, thanks.