Inject colors dynamically into component

Question

Inject colors dynamically into component

I currently have two components in my project. The first component is responsible for setting colors which are then used in the second component. However, I find it tedious to set each color individually and am looking for a more efficient solution. I am considering using an array to store all the colors instead of adding them one by one.

Below is the code snippet:

Component 1 HTML

<div [ngClass]="{'brand-error-image-banner': data?.redImageBanner, 'graphite-grey-image-banner': data?.greyImageBanner, 'graphite-orange-image-banner': data?.orangeDarkImageBanner}</div>

Component 1 SCSS

.brand-error-image-banner {
    background-color: $brand-error;
    height: 164px;
    margin: -24px -24px 24px;
}

.graphite-grey-image-banner {
    background-color: $graphite-3;
    height: 164px;
    margin: -24px -24px 24px;
}

.graphite-orange-image-banner {
  background-color: $brand-orange-light;
  height: 164px;
  margin: -24px -24px 24px;
}

Component 1 Modal

export class Component1{
  public redImageBanner: boolean = false;
  public greyImageBanner: boolean  = false;
  public orangeDarkImageBanner: boolean  = false;


  constructor(args) {
    this.redImageBanner = args.redImageBanner;
    this.greyImageBanner = args.greyImageBanner;
    this.orangeDarkImageBanner = args.orangeDarkImageBanner;
  }
}

Component 2 HTML

<component1 [data]="{orangeDarkImageBanner: false, redImageBanner: true, greyImageBanner: false}"></component1>

In essence, I want to avoid specifying each color separately as shown in the example above. Is there a way to make it more generic so that I can simply add a color like this?

<component1 [data]="{color: graphite-orange-image-banner}"></component1>

css angular scss-mixins

Answer 1

Answer №1

If you want to dynamically bind a style property in Angular, you can make use of HostBinding. Here is an example for better understanding (give it a try):

For the Parent component:

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

@Component({
  selector: 'my-app',
  template: `<hello [data]="{ color: selectedColor }"></hello>
  <label for="colors">I am parent color chooser:</label>
  <select name="colors" id="colors" [(ngModel)]="selectedColor">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
  </select>`,
})
export class AppComponent {
  selectedColor = 'red';
}

For the Child component:

import { Component, HostBinding, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>I am the child component!</h1>`,
})
export class HelloComponent {
  @HostBinding('style.color') // you can also bind class names if needed
  color: string;

  @Input()
  set data({ color }) {
    this.color = color; // you could define your logic to map strings to colors here
  }
}

Answer 2

If you want to dynamically bind a style property in Angular, you can make use of HostBinding. Here is an example for better understanding (give it a try):

For the Parent component:

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

@Component({
  selector: 'my-app',
  template: `<hello [data]="{ color: selectedColor }"></hello>
  <label for="colors">I am parent color chooser:</label>
  <select name="colors" id="colors" [(ngModel)]="selectedColor">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
  </select>`,
})
export class AppComponent {
  selectedColor = 'red';
}

For the Child component:

import { Component, HostBinding, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>I am the child component!</h1>`,
})
export class HelloComponent {
  @HostBinding('style.color') // you can also bind class names if needed
  color: string;

  @Input()
  set data({ color }) {
    this.color = color; // you could define your logic to map strings to colors here
  }
}

Inject colors dynamically into component

Answer №1

Similar questions

What is the equivalent variable in Angular for storing session values, similar to PHP's $_session variable

PHP loader encountered an error: Module "." not found

Deciphering the hierarchy of z-index stacking

What is the best way to ensure that two contact fields are capable of adapting

How to create nested nav menus that are optimized for touch-screen devices?

How to adjust the banner image placement in Squarespace

Reposition text below images in Meta Slider

Looking for straightforward tips on parsing CSS code

Is there a way I can finish animating these divs in a diagonal motion?

Why does my 'click' event listener only work for the first two <li>'s and not the others?

List style image does not serve its intended purpose

Guide to incorporating a Menu feature into your MVC 5 application

Is there a way to adjust the height relative to the viewport in Bootstrap 5 for values other than 100?

Unable to retrieve information from the redux store

Learning how to merge two observable streams in Angular2 by utilizing RxJS and the powerful .flatMap method

"Exploring data trends with an ng2-charts line graph displaying x and y axis values

One of the quirks of Angularjs is that the ng-enter animation will only be

After the assignment, TypeScript reordered the elements of the array

The method getDay is not recognized as a function in Typescript Angular

Circular Dependencies in Angular (only the file name)