dynamic switching of two styles.css file in one angular application - css

Question

I have to merge two angular applications into one major angular application. Hence, now i am having two styles.css files in one angular application. On running this application after merging both, css is going completely for the angular application.
Is there any way by which we can call this two style.css files dynamically depending on the requirement? Or I need to check each class one by one?

Answer 1

I recommend you to use two different layouts, each one is a component, so each one has a different set of styles. That it's really easy wit angular router.
In your routing module:
// Layout 1
{
path: '',
component: Layout1Component,
children: [
{ path: 'pageL1_1', component: PageL1_1Component },
{ path: 'pageL1_2', component: PageL1_2Component }
]
},
// Layout 2 routes goes here here
{
path: '',
component: Layout2Component,
children: [
{ path: 'pageL2_1', component: PageL2_1Component },
{ path: 'pageL2_2', component: PageL2_2Component }
]
},
In your app.component.html:
<router-outlet></router-outlet>
The layouts templates has to include the element to in order to show child navigation componets.
IMPORTANT: Each layput controller should disable view encapsulation so styles applies ti child components:
#Component({
selector: 'app-layout_1',
templateUrl: './layout_1.component.html',
styleUrls: ['./layout_1.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Layout1Component implements OnInit {
...
}