Use variable color in component.ts Angular

Question

I have an array of colors that I would like to pass to child component.

colors = ['#1e88e5', '#e53935', '#757575'];

I can do it as above with the hardcode hex values, but is there a way that I can use the global variable instead like below.

colors = [$primary, $secondary, $normal];

Since I would like to use the global variable on the component and not on the scss, I am not sure how can I use it.

Any help is appreciated.

Thanks

You can create a class with the right color, and use the class as string instead of color. — Y. Tarion
– Y. Tarion, Commented Sep 3, 2018 at 7:37
Since your colors are called primary, secondary and accent, I assume they won't chang that much when you input them into your components. I would suggest you create a directive for that. — user4676340
– user4676340, Commented Sep 3, 2018 at 8:05
@trichetriche I have list of more than 100 color variables and would like to use in .ts file for my charts. Is there a way I can use that global variables in .ts file — surazzarus
– surazzarus, Commented Sep 4, 2018 at 8:37

Aniket Avhad · Accepted Answer · 2018-09-03 08:00:26Z

1

You can create class and pass to the child component

here's is an example,

color.ts

export class Color {

  $primary = '#ff0000';
  $secondary = '#ffff00';
}

in app.component.ts

import { Color} from './color';

@Component({
  selector: 'my-app',
  template: `<hello [color]="color"></hello>`
})
export class AppComponent  {
   color = new Color();
}

and in hello.component.ts

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

@Component({
  selector: 'hello',
  template: `<h1 [ngStyle]="{color: color.$primary}">Hello</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() color: any;

}

here is Stackblitz demo

answered Sep 3, 2018 at 8:00

Aniket Avhad

4,1453 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

surazzarus Over a year ago

thanks for the reply. Is there a way that I can use the already existing variable color instead of making the variables again? This isn't what I wanted, instead using already existing variables.

Collectives™ on Stack Overflow

Use variable color in component.ts Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related