Override CSS-Property of child div in angular2

Question

Currently I'm using the progressbar of ng2-bootstrap in the GUI of my website. The HTML which I use for this step is very simple:

  <div class="col-lg-8 col-md-4">
    <progressbar  max="100" class="progress-striped" [value]="progress">{{progress}}%</progressbar>
  </div>

This gets rendered into the following HTML:

<div class="col-lg-8 col-md-4">
    <progressbar class="progress-striped" max="100">
        <div progress="" max="100" class="progress" style="height: 30px;">
            <bar>
                <div aria-valuemin="0" class="progress-bar" role="progressbar" style="min-width: 0px; width: 0%;" ng-reflect-initial-classes="progress-bar" aria-valuenow="0" aria-valuetext="0%">
                    0%
                </div>
            </bar>


        </div>
    </progressbar>
</div>

I removed some angular directives to improve the readability

The height of the progressbar is set in the second div within the css-class progress, which I can not access, because it is set in the provided source code of the component. Also the innermost div is the one I would need to access if I want to change the font-size.

I tried to override the style in the parent to set the height, but the progress class is more specific and therefore I could not override it.

I found a not very pretty solution which uses ElementRef and Renderer, but this scales very bad and will get messy if there are multiple progressbars(ATM I'm trying to access a second progressbar):

  ngAfterViewInit() {
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div'), 'height', '30px');
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div').querySelector('bar').querySelector('div'), 'font-size', '15px');
  }

Are there better approaches to solve this problem? As last resort I could try to adjust the source code of the component to access both values, but actually I want to avoid this.

j2L4e · Accepted Answer · 2016-11-11 12:03:08Z

1

You mention specificity as the problem. If that's the case, using !important is a solution. Anything marked with !important will gain top-specificity and cannot be overridden by any other non-!important CSS rule or inline styles. When put in your global.css file this should work for all progressbars. It might not work from within your component.css due to view encapsulation.

progressbar > div[progress] {
  height: 30px !important;
}

progressbar > div[progress] > bar > .progress-bar {
  font-size: 15px !important;
}

answered Nov 11, 2016 at 12:03

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

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

1 Comment

Akkusativobjekt Over a year ago

It works, nice! If I remember correctly I tried this solution, but I put the css code in the components.css file. Now I looked up the topic view encapsulation and with ViewEncapsulation set to None it works with the component.css file, too

Collectives™ on Stack Overflow

Override CSS-Property of child div in angular2

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