Tabset ViewEncapsulation

[msqaddura]

Hey guys, hope you are doing well

what do you think about changing the View Encapsuation of NgbTabset to None? as we really needed to change it quite often

Thanks in advance!

[maxokorokov]

@msqaddura seems to me as a duplicate of #2930.
But I guess we should explicitly set it to None everywhere as it was suggested.

[msqaddura]

@maxokorokov as I understand, the problem is rather coming from angular https://angular.io/api/core/Component#encapsulation

If not supplied, the value is taken from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated.

If the policy is set to ViewEncapsulation.Emulated and the component has no styles or styleUrls specified, the policy is automatically switched to ViewEncapsulation.None.

So i assume you want it anyway to be ViewEncapsulation.None, and I assume that the reason why it is not working is because of the exportAs. so it goes back to ViewEncapsulation.Emulated

Since the consent is to have it ViewEncapsulation.None, why not putting it implicitly? It might help a lot of people, me inclusive :P

[maxokorokov]

@mschoudry, yes we should put it explicitly

[msqaddura]

@maxokorokov maybe you wanted to tag me instead. and as well might have got me wrong
I meant maybe we do it here in the ngbootstrap. as long as the consent is to have it None be it directly or through compiler indirectly

[msqaddura]

I will explain a bit more so we stay on the same page

The Assumption (the way I understood from previous comments) :
Following angular guide, ViewEncapsulation.None was not needed inside NgbTabset due to the fact that angular compiler will automatically transform it to ViewEncapsulation.None due to the lack of styles or styleUrls.

Expectation (based on the assumption )
NgbTabset inside our host components will have ViewEncapsulation.None, hence can be styled explicitly without the need to add ViewEncapsulation.None in our host component.

Result
Different from expectation & assumption, NgbTabset does not get ViewEncapsulation.None and the only way to style it is to implicitly add the host component ViewEncapsulation.None.

Solution

• Add ViewEncapsulation.None to NgbTabset
• Find out why the behaviour is different from angular guide.

Is that what is happening or am I getting something wrong?