Change the background color of a span element dynamically

Question

Change the background color of a span element dynamically

I am currently working on implementing dynamic background coloring for a span tag in my Angular view that displays document types. The code snippet provided is as follows:

<mat-card *ngFor="let record of records">
  <span class="doc-id">
    Document ID: {{ record.id }}
  </span>
  <span>
    {{ record.documentType }}
  </span>
</mat-card>

The record.documentType contains string values retrieved from the backend. The objective is to assign different random background colors based on the document type.

For instance:

If the documentType is 'employee', all employee documents should have a specific color (e.g., green). Similarly, if it is 'salary', salary documents should have another random color (e.g., yellow).

I have experimented with various solutions found online, but none have met my requirements adequately.

My current approach involves passing the documentType value to a TypeScript function, which will generate a new random color if one has not already been generated for that type.

[ngStyle]="generateRandomBackgroundColor(record.documentType)

Would you happen to have any suggestions or best practices for addressing this particular issue? I am utilizing Sass within the project, so any related suggestions are greatly appreciated.

Thank you in advance!

angular typescript sass

Answer 1

Answer №1

@Pipe({
  name: 'randomColor',
})
export class RandomColorPipe implements PipeTransform {
  private static readonly colors: Map<string, string> = new Map();

  /**
   * Generates random hex color
   * https://css-tricks.com/snippets/javascript/random-hex-color/
   */
  private getRandomColor(): string {
    return Math.floor(Math.random() * 16777215).toString(16);
  }

  public transform(id: string): string {
    const color = RandomColorPipe.colors.get(id) ?? this.getRandomColor();

    if (!RandomColorPipe.colors.has(id)) {
      RandomColorPipe.colors.set(id, color);
    }

    return color;
  }
}

<mat-card *ngFor="let item of items">
  <span class="product-id">
    Product ID: {{ item.id }}
  </span>
  <span [style.backgroundColor]="'#' + (item.category | randomColor)">
    {{ item.category }}
  </span>
</mat-card>

Answer 2

@Pipe({
  name: 'randomColor',
})
export class RandomColorPipe implements PipeTransform {
  private static readonly colors: Map<string, string> = new Map();

  /**
   * Generates random hex color
   * https://css-tricks.com/snippets/javascript/random-hex-color/
   */
  private getRandomColor(): string {
    return Math.floor(Math.random() * 16777215).toString(16);
  }

  public transform(id: string): string {
    const color = RandomColorPipe.colors.get(id) ?? this.getRandomColor();

    if (!RandomColorPipe.colors.has(id)) {
      RandomColorPipe.colors.set(id, color);
    }

    return color;
  }
}

<mat-card *ngFor="let item of items">
  <span class="product-id">
    Product ID: {{ item.id }}
  </span>
  <span [style.backgroundColor]="'#' + (item.category | randomColor)">
    {{ item.category }}
  </span>
</mat-card>

Change the background color of a span element dynamically

Answer №1

Similar questions

The concealed [hidden] attribute in Angular2 triggers the display of the element after a brief delay

Exploring a Firestore collection to extract data fields for storage and utilization

Utilize Angular 10 to send a post request and subsequently trigger another request upon successfully completing the first

The specified property 'XYZ' is not found in the type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

Implementing TypeScript in an Asp.net Core ReactJS application`s configuration

Updating the Angular2 function in the main app component causes the current component to be reset

Combine a constant interface with a generic function to create a unique generic interface

Angular - Managing unexpected routes for customized functionality

Using Angular to fetch API response and convert it into a promise

Make sure to wait for the store to finish updating the data before accessing it. Utilize RxJS and Angular

Unusual Behavior of Observable.concat() in Angular 4 with RxJS 5

Accessing class fields from within an annotation in Typescript

"Exploring the process of unsubscribing or disposing of an interval observable based on a certain condition in Angular2 or

Element is missing the necessary "key" property. (React and TypeScript)

Troubleshooting the Angular 7 mat-select issue caused by the "ellipsis" CSS property with three dots

Exploring Angular: A Comparison of AfterViewInit() and AfterContentInit()

How can you modify a button in Ionic 2 based on the login status, using a modal to redirect to a different page once authenticated?

Why isn't my Bootstrap affecting Angular?

Display JSON Data in HTML using Ionic and Angular

Having trouble with Angular 5's Post function?