Angular Change Text Color Based on Value Dynamically

In this Angular article, we will discuss a simple yet useful feature to dynamically change the color of a text by clicking the button in the App component. To accomplish this we will update the HTML’s native style attribute of the text element.

This way of updating the element’s style property can be used in any way for other purposes as well like changing background color, changing height or width etc.

Why Change Text Color Dynamically?

Let’s have a look at why we need such a feature to change the text color dynamically of the elements in the applications:

1. Enhanced User Experience: Changing the color dynamically based on server responses for example showing error, warning or success statuses..
2. Visual Feedback: It provides visual feedback to users about the state or significance of the displayed content.
3. Data Visualization: Color coding can be used to represent data trends or categories effectively.

Now, let’s get into the implementation details.

Setting Up Your Angular Project

For creating a working sample to switch the text color dynamically, let’s start by creating a new application:

Install Angular CLI if not already installed:

npm install -g @angular/cli

Create a New Angular Project:

ng new text-color-change-app

Navigate to the new project directory:

cd text-color-change-app

Updating the App Component

In the application’s default App component, we will implement the dynamic color switch feature.

Replace the content of app.component.html with the following code:

<div>
  <p [style.color]="textColor">Dynamic Text Color</p>
  <button (click)="changeTextColor('red')">Red</button>
  <button (click)="changeTextColor('green')">Green</button>
  <button (click)="changeTextColor('blue')">Blue</button>
</div>

Here, we have added three buttons, each with a (click) event binding to trigger the changeTextColor method with a color parameter.

Next, modify the app.component.ts file with the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textColor: string = 'black';

  changeTextColor(color: string): void {
    this.textColor = color;
  }
}

We’ve added a changeTextColor method that takes a color parameter and updates the textColor property accordingly.

Testing the App Component

Now serve the Angular application by hitting the ng serve command and opening it in your browser. You will see the “Dynamic Text Color” text and three buttons. Clicking on each button will change the text color accordingly.

ng serve --open

Conclusion

We have successfully implemented this simple yet useful feature to update the text dolor dynamically by updating the style properly and its color attribute on the button click. Similarly we can update style property for other attributes as well dynamically for example based on JSON response from a remote sever we can update th style programatically.