CODEWITHSUNDEEP
ng-bootstrap
Mickey Segal
Mickey Segal

Reputation: 841

How to address classes within an ng-bootstrap component?

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?

Upvotes: 1

Views: 591

Answers (1)

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

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.

Upvotes: 3

Related Questions