Apply CSS style based on JSON value - html

Question

I am trying to apply some CSS to a particular section containing a certain JSON value.
Lets say I want to add a red background to a text containing the words "main article".
I have managed to hide the value by using a pipe like below
#Pipe({
name: 'exclusionfilter',
pure: false
})
#Injectable()
export class ExclusionFilterPipe implements PipeTransform {
transform(value: any) {
if((value!=null)&& (value.toLowerCase().indexOf("main article") != -1)){
return '';
}
else return value;
}
}
and the markup is like this
<h2 class="heading">{{ info.title | exclusionfilter }}</h2>
I want to apply some CSS to the h2 whenever the value is "main article".
I dont think that this approach is clean, but cant think of alternatives

Answer 1

Try to use dynamic css/class binding of angular :
<h2 class="heading" [ngClass]='{"redBackground" : info?.title == "main article"}'>{{ info.title | exclusionfilter }}</h2>
where redBackground is an css class having background Red.

Answer 2

You have to use ElementRef in that case. Find element from DOM and apply required style as below example: First find element who has text you required and then apply style
this.el.nativeElement.getElementsByClassName("k-grouping-header")[0].style.display = "block";
If you know at DOM level where to add style call it as below:
HTML:
<div [ngStyle]="setStyles()">
Typescript:
private setStyles(): any {
let styles = {
'font-size': '10px'
};
return styles;
}