Angular/CSS Style parts of a component dynamically

Question

I have a component, that has different parts. However, I want to be able to style the individual components with different colors.

For instance:

<div class="OuterBox">
    <div class="InnerBox1"></div>
    <div class="Seperator"></div>
    <div class="SecondBox">
        <div class="TextInfo"></div>
    </div>
</div>

I add this to a page, via a standard Angular component:

<app-my-component></app-my-component>

I have seen the ngStyle option for Angular which I could use to specify , but my problem is I cannot simply do a <app-my-component [styles]="{backgroundColor: 'blue', 'font-size': '16px'}">. I need to color the different div sections differently, for instance the InnerBox1 has a background of green, and the SecondBox background should be red.

I can do these styles on the individual CSS, but when I want to make this a common component, I want to be able to change the colors on each instance, so they can be different from green and red, and could be blue and orange or something else.

@Vega not really. My example is very basic here to simply try to illustrate the issue, but I need more control then simply the hierarchy of the CSS. The main issue is that this is to be a common component for many applications that needs to accept external colors to change the styling in many parts of the component, not just the simple couple of divs that I showed in my demo example. — Steven Scott, Aug 12 '19 at 14:03

score 1 · Accepted Answer · answered Aug 12 '19 at 04:33

1

You can simply declare a variable for each color in your component and bind them from outside In your component :

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: `<div class="OuterBox" [ngStyle]="{backgroundColor: outerBoxColor}">
    <div class="InnerBox1"></div>
    <div class="Seperator"></div>
    <div class="SecondBox">
        <div class="TextInfo"></div>
    </div>
</div>`
})
export class MyComponent {
  @Input() outerBoxColor;
}

and then pass the color from outside like this:

<app-my-component [outerBoxColor]="'blue'"></app-my-component>
<app-my-component [outerBoxColor]="'red'"></app-my-component>

answered Aug 12 '19 at 04:33

Hesam Kashefi

620
8
15

Sort of. My component is much more complex than the simple example I have provided. The issue is that when it is called, i just want a basic foreground/background color provided, but need to use this is many places. I am trying to build a component for external applications to use, so calling internal functions can work, but I have to clearly set input values to get what I want. – Steven Scott Aug 12 '19 at 13:46
1

@StevenScott, I don't get what you are trying to do, but if you just want to reuse that color just do it where ever you want, for example in my sample change the name of outerBoxColor to backgroundColor and write [ngStyle]="{ backgroundColor: backgroundColor }" on each element you need. you can do the same for foreground color – Hesam Kashefi Aug 12 '19 at 14:41

score 0 · Answer 2 · edited Sep 29 '19 at 18:22

0

Or if you want style more than just one css selector you can use DomSantizer and pass all css style to your Child component

In parent:

<child-component
  div1Style='width: 400px;background-color:red;'
  div2Style='width: 400px;background-color:red;'>
</child-component>

child component input variable:

@Input() div1Style: string;
@Input() div2Style: string;

in child in html div

 <div [style]='GetStyle(div1Style)' >
 <div [style]='GetStyle(div2Style)' >

and in code of child component

constructor(private sanitizer: DomSanitizer) {  } //to inject instance of this DomSantizer

GetStyle(c) {
if (isNullOrUndefined(c)) { return c; }
return  this.sanitizer.bypassSecurityTrustStyle(c);
}

and you can declare as many these variables as you need - one per each div for example

edited Sep 29 '19 at 18:22

marc_s

732,580
175
1,330
1,459

answered Aug 12 '19 at 05:18

d00lar

802
7
25

Sort of. My component is much more complex than the simple example I have provided. The issue is that when it is called, i just want a basic foreground/background color provided, but need to use this is many places. I am trying to build a component for external applications to use, so calling internal functions can work, but I have to clearly set input values to get what I want. This is helping direct me to what I might be able to do. – Steven Scott Aug 12 '19 at 13:46
so i think you need to be more explicit of what you want to do because this solvs the problem from your post ;) :ng-deep etc was also probably a god a solution for you before angular 8 was relased and support for this was dropped. see here https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file – d00lar Aug 12 '19 at 15:20

Angular/CSS Style parts of a component dynamically

2 Answers2