Using an Angular pipe, you can dynamically adjust the background color based on the data

Question

Using an Angular pipe, you can dynamically adjust the background color based on the data

In my HTML, I am using a div with an *ngFor loop to iterate through userList:

<div  *ngFor="let user of userList">
    <div>{{ Name }} </div>
</div>

Also, I have an object containing codes and colors:

 [
        {
            "code": "A",
            "color": "#0071e3"
        },
        {
            "code": "B",
            "color": "#ff0000"
        },
        {
            "code": "C",
            "color": "#249309"
        },
    ..
    ]

The task is to match the starting letter of each Name in the userList with the code in the object and assign the corresponding color.

angular typescript

Answer 1

Answer №1

Your HTML code should look like this:

<div *ngFor="let user of userList">
  <div [style.color]="user.Name | firstLetterBg">{{ user.Name }}</div>
</div>

Here is the pipe code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'firstLetterBg'
})
export class FirstLetterBgPipe implements PipeTransform {

private colors: Array<{code: string, color: string}> = [
    {
      "code": "A",
      "color": "#0071e3"
    },
    {
      "code": "B",
      "color": "#ff0000"
    },
    {
      "code": "C",
      "color": "#249309"
    }
];

  transform(name: string): string {
    const firstLetter = name[0].toUpperCase();
    const colorObject = colors.find(x => x.code === firstLetter);
    return colorObject ? colorObject.color : '';
  }
}

@MatthieuRiegler suggests using a directive instead. You can modify my code to achieve that.

Best regards,

Answer 2

Your HTML code should look like this:

<div *ngFor="let user of userList">
  <div [style.color]="user.Name | firstLetterBg">{{ user.Name }}</div>
</div>

Here is the pipe code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'firstLetterBg'
})
export class FirstLetterBgPipe implements PipeTransform {

private colors: Array<{code: string, color: string}> = [
    {
      "code": "A",
      "color": "#0071e3"
    },
    {
      "code": "B",
      "color": "#ff0000"
    },
    {
      "code": "C",
      "color": "#249309"
    }
];

  transform(name: string): string {
    const firstLetter = name[0].toUpperCase();
    const colorObject = colors.find(x => x.code === firstLetter);
    return colorObject ? colorObject.color : '';
  }
}

@MatthieuRiegler suggests using a directive instead. You can modify my code to achieve that.

Best regards,

Using an Angular pipe, you can dynamically adjust the background color based on the data

Answer №1

Similar questions

Steps to reveal a concealed div when a button is pressed and hide the button in Angular 2

Laravel 5.7 not receiving form data when submitted from Angular 7

Using Angular's router-outlet can sometimes result in replacing or updating the

Is it possible to deactivate input elements within a TypeScript file?

I noticed that when using Next.js with the `revalidate: 1` option on a static page, it is triggering two full F5 refresh actions instead of just one. I was hoping for

Using Firebase collection inside an Angular constant

Deactivate the rows within an Office UI Fabric React DetailsList

Transform a protractor screenshot into a PDF file

I encountered the error message "The property you are trying to access does not exist on the type 'never'" while attempting to retrieve JSON data from the API response

Nestjs: Step-by-step guide to removing a specific application from a Nestjs monorepo using nest/cli

Eliminate JSON data that pertains to dates that are either in the past or future

Tips for transforming promise function into rxjs Observables in Angular 10

Type guards do not work properly on a union of enum types in TypeScript

Creating a personalized bullet text box with HTML and Javascript: A step-by-step guide

Even when I try to access the properties of the arguments object, it remains empty and has a zero

How can the adapter pattern be implemented in Angular when dealing with an HTTP response containing an array of objects?

Is it possible for input properties of array type to change on multiple components in Angular 9?

Creating a custom colored progress bar in Angular 2 using Bootstrap 4

React component's state is not being correctly refreshed on key events

What is the best way to free up memory after receiving responseText in a continuous streaming request?