Issue
I have a page which uses googlemap on it and have placed some button’s on the map which looks like this for design reference.
Here is a Design Sample
What I want is to have these buttons act like a radio button which means that if a user clicks on one I want to change the look like back ground color. What is the best way to do this ? Is there a way to modify material select or do i need to do this via CSS and change the image based on click ?
Solution
As there was no clear solution I actually just did it with basic angular material and buttons.
In my HTML i used the below code
<button mat-mini-fab [ngClass]="[bntStyle1]" (click)="changeButton(1)">
<mat-icon style="font-size: 24px" fontSet="fa" fontIcon="fa-draw-polygon"></mat icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle2]" (click)="changeButton(2)">
<mat-icon>search</mat-icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle3]" (click)="changeButton(3)">
<mat-icon>search</mat-icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle4]" (click)="changeButton(4)">
<mat-icon>search</mat-icon>
</button>
then in my comonent i have a function called change button which will set the style based on which button was clicked. Also on ngOnInit I set them all the same before the first click event. I am sure i can clean this up but for now it does the job and acts like a option / select.
ngOnInit() {
this. bntStyle1 = 'btn-default';
this. bntStyle2 = 'btn-default';
this. bntStyle3 = 'btn-default';
this. bntStyle4 = 'btn-default';
}
changeButton(bttn) {
if (bttn === 1 ) {
this.bntStyle1 = 'btn-change';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-default';
this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
}
if (bttn === 2 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-change';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-default';
}
if (bttn === 3 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-change';
this.bntStyle4 = 'btn-default';
}
if (bttn === 4 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-change';
}
console.log('We hit button change');
}