Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML.
My Objective:
- I aim to modify the background-color of a button when it is clicked.
- The previously clicked button should revert to its original styling once another button is clicked. The newly clicked button should be highlighted by changing the background-color.
Constraint:
I want to achieve this without utilizing the click-event method. I prefer to accomplish this solely through CSS-based styling, such as assigning buttons with an id and class.
I have reviewed several relevant stack-overflow posts related to this issue but found them unhelpful. Some suggest using hover and active classes.
HTML:
<div class="row">
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub1()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" ><span>Hub 1</span></button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub2()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub2</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub3()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 3</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub4()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 4</button>
</div>
</div>
Typescript:
redirectToHub1() {
this.router.navigate(["/hubs/hub1"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub2"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub3() {
this.router.navigate(["/hubs/hub3"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub4"], {
queryParams: { id: `${this.hubCode}` },
});
}
Current Display:
https://i.sstatic.net/P1Rgs.png
Required Display:
https://i.sstatic.net/UcOk7.png
The below styling works perfectly, but having
(click)="redirectToHub()".ant-btn:active, .redirect_btn:focus{
background: blue;
}