How to choose between which css to use for navbar component angular 6

Question

I have an angular 6 application that uses two different style sheets based off of what role the user has in the system.

Role 1 - Stylesheet 1 Role 2 - Stylesheet 2

The Navbar is a seperate component and is part of the layouts structure of the application.

With new requirements the Navbar must new be styled differently based on which Role the user has.

As you can see the styleUrls only uses one css file. Is there a way to use an ngIF and then if routerLink =/user1 use navbar.css else if routerLink = /user2 use navbar2.css?

@Component({
    selector: 'jhi-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['navbar.css']
})

Thanks

Answer 1

So far as I understand what you are looking for isn't available. This is because the css gets compiled into the component code. That means that your css is in your compiled js files and it is scoped to the component that was compiled.

What I do is namespace my css and store both versions in the same file then conditionally add a class at the top level to turn one set of styles on or another.

For example:

<!-- template.html -->
<div [ngClass]="{'role-one': roleOneActive, 'role-two': roleTwoActive}">
  <div class="another-class">Cool Code in Here</div>
</div>

Then in your css:

.role-one .another-class {
  background-color: blue;
}

.role-two .another-class {
  background-color: red;
}

With this when someone has role one the background is blue and if they have role two they will have a red background.

While this isn't ideal because users will download both styles it is the only way if you want to use Angular's styleUrls decorator.

Hope that helps!