How to change color of the Object value in Angular ?

JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. JSON objects are key: value pairs. In this article, we will learn How to change the color of the object value in Angular.

Steps for Installing & Configuring the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Project Structure

It will look like the following:

Example 1: In this article, we will change the color of the object value based on a boolean value.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  How to change color of the
  object value in Angular?
</h2>
<div *ngFor="let item of gfg">
    <b>Course:  </b>{{item.course}}
    <b>Value :  </b>
    <span [ngClass]=
          "{greenClass: item.enabled,
            redClass: !item.enabled}">
        {{item.cost}}
    </span>
</div>

Javascript

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css'],
    styles: [`
      .greenClass { color:green}
      .redClass {color:red}
    `]
})

export class AppComponent {
    gfg: any =
        [
            { course: "HTML", enabled: true, cost: "1700" },
            { course: "CSS", enabled: false, cost: "4700" },
            { course: "Javascript", enabled: false, cost: "1890" },
            { course: "Angular", enabled: true, cost: "2700" },
            { course: "React", enabled: false, cost: "17050" },
            { course: "Python", enabled: true, cost: "13700" },
            { course: "C++", enabled: true, cost: "1200" },
            { course: "Java", enabled: true, cost: "8700" }
        ]
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { AppComponent }
    from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we will change the color of the balance if it is less than zero, else it will be green.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  How to change color of the
  object value in Angular?
</h2>

<div *ngFor="let item of gfg">
    <b>Account Holder Name:  </b>{{item.name}}
    <b>Balance :  </b>
    <span [ngClass]="{'greenClass' : item.balance > 0,
                      'redClass' : item.balance < 0}">
        {{item.balance}}
    </span>
</div>

Javascript

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css'],
    styles: [`
      .greenClass { color:green}
      .redClass {color:red}
    `]
})

export class AppComponent {
    gfg: any =
        [
            { name: "Vivek", balance: "1700" },
            { name: "Alok", balance: "-100" },
            { name: "Rishabh", balance: "1890" },
            { name: "Kirti", balance: "-988" },
            { name: "Priya", balance: "17050" },
            { name: "Anjali", balance: "-13700" },
            { name: "Raghav", balance: "1200" },
            { name: "Nikita", balance: "8700" }
        ]
}

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { AppComponent }
    from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output: