How to address classes within an ng-bootstrap component?

Question

I want to add a css style to a NgbProgressbar and I'm having trouble doing so. Specifically, I want to give a custom color to the progress bar. Using the "Contextual progress bars" demo at https://ng-bootstrap.github.io/#/components/progressbar, the code for the src/progressbar-basic.ts file is:

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

@Component({
    selector: 'ngbd-progressbar-basic',
    templateUrl: 'src/progressbar-basic.html',
    styles: [`
        ngb-progressbar {
            margin-top: 5rem;
        }
    `]
})
export class NgbdProgressbarBasic {
}

Inspecting the components in a browser, the background-color style for the progress bar is controlled by .bg-success and .progress-bar. Adding

.progress-bar {
    background-color:#ff9900;
}

to a css file attached to the index.html file makes the desired change, but I'm trying to add it only here, rather than globally.

Adding it as done for the ngb-progressbar margin-top style above doesn't seem to work, though I don't see any effect of the margin-top style either. I've turned off the type="success" type statements in progressbar-basic.html to keep them from conflicting.

How can one modify the progressbar-basic.ts code above to attach a style to the progress-bar inside the NgbProgressbar?

pkozlowski.opensource · Accepted Answer · 2017-04-14 19:06:06Z

3

This question has more to do with how styles encapsulation work in Angular rather than something specific to ng-bootstrap, but the short answer is that in the default style encapsulation (from https://angular.io/docs/ts/latest/guide/component-styles.html):

Component styles normally apply only to the HTML in the component's own template

Since ngb-progressbar is not part of the component HTML (it is a different component altogether) you have to force styles to propagate down the components structure:

Use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies to both the view children and content children of the component

Translating this to your particular problem would mean that you should write:

  styles: [`
    /deep/ div.bg-success {
      background-color: #ff9900!important; 
    }
  `]

Here is a live example in a plunker: http://plnkr.co/edit/DwBZ0Lr55onprz8bEcKI?p=preview

A word of warning: while the above works I would rather create a new type of a progressbar in your CSS and use it type as an argument to the ngb-progressbar type input. This would give you a chance to properly name a new concept that you are trying to express here.

edited Apr 14, 2017 at 19:06

answered Apr 14, 2017 at 19:00

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

1 Comment

Mickey Segal Over a year ago

I see that /deep/ div.progress-bar also works. I will explore Component Styles to get a better understanding of this stuff. Thanks for pointing me in the right direction.

Collectives™ on Stack Overflow

How to address classes within an ng-bootstrap component?

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