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

Pardeep Jain · Accepted Answer · 2017-04-05 12:01:22Z

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.

answered Apr 5, 2017 at 12:01

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandip - Frontend Developer · Accepted Answer · 2017-04-05 12:01:02Z

0

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

answered Apr 5, 2017 at 12:01

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

Collectives™ on Stack Overflow

Apply CSS style based on JSON value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related