My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so:
Some text <span class="failResult">that's emphasized</span> and other text too.
The styling for these classes is straightforward in the CSS file. However, despite applying the class correctly, the color does not display on the text within the span.
Here are the troubleshooting steps I've taken:
- I inspected the output using dev tools and confirmed that the class is indeed applied.
- I ensured that the class is defined in the CSS file and loaded by the browser.
- Directly setting the color attribute on the span via dev tools worked as expected.
- Attempting to set the color directly in the string value was sanitized by Angular for security reasons.
- Applying different classes through dev tools also did not change the color.
Is there a limitation with spans not reflecting colors applied through classes? How can I solve this issue?
EDIT
Although unrelated to the question, here is the code snippet responsible for generating the content:
GetReportSummary(): string {
const values = [];
values.push(`${this.TotalChecks} Checks`);
if (this.PassingChecks > 0 || this.FailingChecks > 0) {
let resultClass = 'passResult';
if (this.PassPercent < 70) {
resultClass = 'failResult';
} else if (this.PassPercent < 90) {
resultClass = 'warnResult';
}
values.push(`${this.PassingChecks} <span class="${resultClass}">(${this.PassPercent}%)</span> Pass`);
values.push(`${this.FailingChecks} Fail`);
}
if (this.ReportingChecks > 0) {
values.push(`${this.ReportingChecks} Count/List`);
}
if (this.NotRunChecks > 0) {
values.push(`${this.NotRunChecks} Not Run`);
}
if (this.ErrorChecks > 0) {
values.push(`<span class="errorResult">${this.ErrorChecks} Error</span>`);
}
return values.join(', ');
}