Apply parent component css to child not in sibling component in Angular 11

Question

1. i have 2 types of component, i) before login ii) after login

2. want to add 2 different css for both parent component,

3. with using ViewEncapsulation.None it apply in sibling component also, here is the structure of code

    - ParentComponent1
      - ChildCompoent1.1
      - ChildCompoent1.2
    - ParentComponent2
      - ChildCompoent2.1
      - ChildCompoent2.2
   

4. if i add CSS in ParentComponent1 then it only apply in ChildComponent1.1 and ChildComponent1.2 not in 2.1 and 2.2, same thing apply in ParentComponent2

is there any way to remove ViewEncapsulation.None or apply CSS only in child component not in Sibling component

Answer 1

You can use Emulated encapsulation

encapsulation: ViewEncapsulation.Emulated,

Similar to ViewEncapsulation.None, Angular adds the styles for this component to the head of the document, but with "scoped" styles.

Therefore, only the elements directly within this component's template will match its styles. Since the "scoped" styles from the EmulatedEncapsulationComponent are very specific, they override the global styles from the NoEncapsulationComponent.