I am creating a web based app, and I am using Spring and Angular. I am writing the front end in the Angular folder, and I have this HTML code to be on every page(app.component.html) - it is a menu:
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" >Home</a>
<a routerLink="/login" >Login</a>
<a routerLink="/register" >Register</a>
</div>
</div>
And I have this as css so it is centered and looking all nice.
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: right;
}
How do I get it to change the color of the buttons(Home, Login, Register) when I am in the current page? (for ex. when I'm in Home page the button will be green, when in Login - it will be green)
You can use routerLinkActive which will add a CSS class to the element when the route is active.
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" routerLinkActive="active-link">Home</a>
<a routerLink="/login" routerLinkActive="active-link">Login</a>
<a routerLink="/register" routerLinkActive="active-link">Register</a>
</div>
</div>
.topnav-right a.active-link {
color: #ff0000;
}