Apply styles only if angular component is created

Question

I'm creating components dynamically using Angular Router. Also, I'm importing 'material design' CDN because my first component (SectionAComponent) needs it in order to style its forms.

But,on the other hand, I don't want my forms from SectionBComponent to be affected by 'material design' styles.

I wonder if there's a way to import CDN in SectionAComponent's stylesheet restricting its scope to inner components, or by removing/inserting styles in DOM only if the component it's instantiated.

Answer 1

To fix this issue in an angular way you must checkout angular's View Encapsulation.

Also, try to import the material design styles inside your component scss instead of importing it globally as follows.