How to change color of the Object value in Angular ?
Last Updated :
24 Apr, 2025
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 { }