Dynamically add colors into component

Question

I have 2 components. The first component sets colors that I then use in my second component however I have to set every color individually which I do not want to do. I am trying to possibly add an array that I can add the colors inside instead of adding individual colors.

Here is my code

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>

So basically I do not want to have to add each color individually eg. In the above code I am adding red, grey and orange and if I want to add a new color then I will have to make a new entry. How can I just keep it generic and then add the color like this for example?

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

or set a scoped scss in component2 with generic class and with your variable bg color- — Medda86, Nov 03 '22 at 07:37
@Medda86 in-line is not an option as I still want to use the modal. I am trying to add a generic array in the modal where I can specify the color in the second component and pass it to that data array — skydev, Nov 03 '22 at 07:49

score 0 · Accepted Answer · answered Nov 03 '22 at 07:59

You can use HostBinding. Example (try me):

Parent:

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';
}

Child

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

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

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

Dynamically add colors into component

1 Answers1