[Fixed] How can i create a select with buttons in Angular material

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');

}