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.
<!-- 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 >
|
// 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" }
]
} |
// 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.
<!-- 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 >
|
// 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" }
]
} |
// 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: