Change span class title based on JSON file data - html

Question

My goal is to generate a tool tip using the title attribute of a span class, but to have the title content change depending on the span class.
Today, I have a JSON file that has an attribute of status, which is represented with status color (e.g. gray, blue, orange, etc). Example:
{
"area":"Grouping",
"title": "Information Architecture",
"link": "#",
"password": "",
"designer": "Some Name Here",
"status": "purple",
"dateupdated": "2019-07-18"
},
Then I use angular to show this data. Here is the status column:
<ng-template
let-row="row"
let-value="value"
#statusColumnTemplate>
<span class="{{ value }}" title="Test title"></span>
</ng-template>
Obviously with this code, no matter what class color is passed in the title will be the same. Ideally, I'd like a different message in the title for each class, but I am unsure how to do this.
Any help is greatly appreciated!

Answer 1

So you have 2 possibilities to achieve that:
You can write your condition directly into the title-tag like this:
<span class="{{ value }}" [title]="value === 'something' ? 'Tooltip on match' : 'Tooltip on else'">
</span>
You can write your entire spans conditionally with an *ngIf structural directive:
<span *ngIf="value === 'something'" class="{{ value }}" title="First Tooltip">
</span>
<span *ngIf="value !== 'something'" class="{{ value }}" title="Second Tooltip">
</span>