Search code examples
angularangular11

How to check from JSON file if "Process" : false then data array line should be another color in angular 11

How to check from JSON file if data type "Process" : false then the same the data array line should be another color. Please see my code in component.ts file. I am filtering by type from the line from json file. please guide how to render if process false from json file then the data array line should be difference color.

ngOnInit(): void {
    this.loader.loaderdiv = true;
    this.subscription = this.api.getRealTimeData().subscribe(data => {
      this.loader.loaderdiv = false;
      console.log("****", data);
      this.logisticHpPlantDate2 = data.filter((plant) => plant.type == 'Logistic HP plant Data 2');
      this.logisticHpPlantDate3 = data.filter((plant) => plant.type == 'Logistic HP plant Data 3');
    })
  }

I and filtering the type from the line from json file then array list has been incorporate in component.html file.

<div class="row m_top5" *ngFor="let data of logisticHpPlantDate2" >
                <div class="col-sm-8 p_right0" >{{data.name}}</div>
                <div class="col-sm-4 text-right p_left0">{{data.data}}</div>
</div>

Also see my JSON code which is rendering in my page.

{
        "type": "Logistic HP plant Data 2",
        "name": "4CBA - Impurity",
        "data": "887 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Benzoic acid - Impurity",
        "data": "654 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "p-toluic acid - Impurity",
        "data": "500 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Phthalic acid / Isophthalic acid",
        "data": "100 TO",
        "process": false
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Water",
        "data": "15 TO",
        "process": false
    },

Also see my screenshot which is coming

enter image description here

But my requirement is

enter image description here

How will solve this issue.

Solution

  • You could add a specific class (foo in this example) based on the condition process: false and do the formatting in your css:

    <div class="col-sm-4 text-right p_left0" [ngClass]={'foo': !data.process}>{{data.data}}</div>

    EDIT:

    First of all, take the time to look at the NgClass documentation.

    The general syntax is this: [ngClass]="{'classToAdd': condition }"

    When condition is truthy Angular will add classToAdd, when condition is falsy will remove the class. So in your case you have some options:

    [ngClass]="{'down': data.process === 'down'}" // Add down class when process === 'down', remove it otherwise
[ngClass]="{'up': data.process === 'up'}" // Add up class when process === 'up', remove it otherwise
[ngClass]="{'down': data.process === 'down', 'up': data.process === 'up'}" // Do both