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
– Steven Scott, Commented Aug 12, 2019 at 14:03

Hesam Kashefi · Accepted Answer · 2019-08-12 04:33:47Z

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, 2019 at 4:33

Hesam Kashefi

6809 silver badges15 bronze badges

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

2 Comments

Steven Scott Over a year ago

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.

Hesam Kashefi Over a year ago

@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

marc_s · Accepted Answer · 2019-09-29 18:22:03Z

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, 2019 at 18:22

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 12, 2019 at 5:18

Dorian

1,09612 silver badges35 bronze badges

2 Comments

Steven Scott Over a year ago

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.

Dorian Over a year ago

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 stackoverflow.com/questions/36527605/…

Collectives™ on Stack Overflow

Angular/CSS Style parts of a component dynamically

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related