Angular2 Dynamically add styles to styleUrls array

Question

I'm writing an app in Agular2, and some of our components allow for a parent adding style classes. Something like this:
Child component.

@Component({
selector: 'app-label-value',
templateUrl: './label-value.component.html',
styleUrls: ['./label-value.component.css']
})
export class LabelValueComponent implements OnInit {

@Input() label: string;
@Input() value: string;
@Input() valueClass: string;
@Input() labelClass: string;
@Input() cssFile: string;

getLabelClasses(){
  let classList = 'label-value-label '
  if (this.labelClass){
    classList += this.labelClass;
  }
  return classList;
}

Child Template:

<div [ngClass]="getLabelClasses()">
  {{label}}
</div>

Inside parent template.

<app-label-value 
  [label]="'Just text'" 
  [value]="'some text'"
  [labelClass]="'label-color standard-text'"
  [cssFile]="'./app.component.css'">
</app-label-value>

This does not work. The div gets the label-value-label label-color standard-text classes, but they aren't loaded from the ./app.component.css class file (and so not displayed).
The child component needs to somehow find and add the ./app.component.css path to the styleUrls array. Or some other method of telling the component where to look for the class file. But I can't seem to figure out how to do it (or even if it's possible).

Maybe are the class not charged. Can you try with: >>> in front of your class in the css file? — Wandrille
– Wandrille, Commented Oct 2, 2017 at 10:32
If you put label-value-label label-color standard-tex in the styles.css file, is it working? — Wandrille
– Wandrille, Commented Oct 2, 2017 at 10:34
Putting label-value-label label-color standard-text in the ./label-value.component.css works, obviously. But I want to allow the parent to feed the child its own (or any other) css file. — AvailableName
– AvailableName, Commented Oct 2, 2017 at 10:38

Shubham Gangpuri · Accepted Answer · 2017-10-02 11:11:30Z

1

Sharing Style Sheet from Parent to Child or Even Child to Parent is not yet feasible in Angular4 You will have access to the only styles you mention in the component's style sheet.

But you do have an option to include multiple style sheets for a component. Right there in the component, you can have a list of style sheets.

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css', './someother.css', './another.css']
})

If you want to have a style available for the entire project you can write it in style.css which is compiled globally and not specific to a component.

answered Oct 2, 2017 at 11:11

Shubham Gangpuri

4314 silver badges12 bronze badges

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

Comments

AvailableName · Accepted Answer · 2017-10-02 11:24:33Z

0

My problem was ViewEncapsulation.
Once I set encapsulation: ViewEncapsulation.None on the parent component, then its CSS file was visible to all other components, including my child component. So I had no need to manually include the CSS file in my child component's styleUrls array, the browser found it amyway.
Of course, the best solution would be to put all "global" styles in the style.css file in the app root.

answered Oct 2, 2017 at 11:24

AvailableName

7066 gold badges13 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular2 Dynamically add styles to styleUrls array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related