Menu
I have DOM that looks something like this:
<app> <router-outlet></router-outlet> <project>...</project> </app> where project element is inserted by the router.
How do I add a class to this element?
660
Router-outlet in Angular works as a placeholder which is used to load the different components dynamically based on the activated component or current route state. Navigation can be done using router-outlet directive and the activated component will take place inside the router-outlet to load its content.
The Router-Outlet is a directive that's available from the router library where the Router inserts the component that gets matched based on the current browser's URL. You can add multiple outlets in your Angular application which enables you to implement advanced routing scenarios.
The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application.
You can have multiple router-outlet in same template by configuring your router and providing name to your router-outlet, you can achieve this as follows. Advantage of below approach is thats you can avoid dirty looking URL with it.
Assuming you always want the class applied to this component, you can use host in your component metadata:
@Component({ selector:'project', host: { class:'classYouWantApplied' } }) Resulting in:
<app> <router-outlet></router-outlet> <project class="classYouWantApplied">...</project> </app> use the adjacent sibling selector and the * wildcard to select the element immediately following the router-outlet
styles.css
router-outlet + * { /* your css */ } 
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
