Apply CSS style based on JSON value

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;
}