I’m trying to set dynamic colors for the background-color
and color
of an ion-button
.
What I’ve achieved so far:
My problem: The button color overlays the button outline.
Is this an Ionic issue, how can I get around this?
My code:
Template:
<ion-button *ngFor="let d of districts" shape="round"
(click)="districtClicked(d)"
[ngStyle]="getDistrictStyle(d)"
color="{{getDistrictColors(d)[0]}}">
{{getDistrictName(d)}}
</ion-button>
Method in my Component:
getDistrictStyle(district: District) {
if (district) {
const colors = this.colorGenerator.getDistrictColors(district);
return {
'background-color': colors[0],
'color': colors[1]
};
}
}
getDistrictColors(district: District)
simply returns an array with two colors in hex (red and white in this case).