One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads.
The JavaScript code I used is quite straightforward:
adaPercentColor(percent, ada) {
if (ada === 0) {
document.getElementById('ada').style.color = 'red';
} else if (percent <= 1 && percent >= .95) {
document.getElementById('ada').style.color = 'green';
} else if (percent <= .94 && percent >= .85) {
document.getElementById('ada').style.color = 'yellow';
} else {
document.getElementById('ada').style.color = 'red';
}
}
Additionally, here is the Angular HTML snippet:
<ion-card-title id="ada">{{rows.ada}}</ion-card-title>
Initially, this setup works perfectly fine. However, I faced an issue where the color resets to black when switching between tabs. To address this, I invoke the JS function within a fetchData() method that is triggered in ngOnInit().