How to address classes within an ng-bootstrap component? -

i want add css style ngbprogressbar , i'm having trouble doing so. specifically, want give custom color progress bar. using "contextual progress bars" demo @ https://ng-bootstrap.github.io/#/components/progressbar, code src/progressbar-basic.ts file is:

import {component} '@angular/core';  @component({     selector: 'ngbd-progressbar-basic',     templateurl: 'src/progressbar-basic.html',     styles: [`         ngb-progressbar {             margin-top: 5rem;         }     `] }) export class ngbdprogressbarbasic { }  

inspecting components in browser, background-color style progress bar controlled .bg-success , .progress-bar. adding

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

to css file attached index.html file makes desired change, i'm trying add here, rather globally.

adding done ngb-progressbar margin-top style above doesn't seem work, though don't see effect of margin-top style either. i've turned off type="success" type statements in progressbar-basic.html keep them conflicting.

how can 1 modify progressbar-basic.ts code above attach style progress-bar inside ngbprogressbar?

this question has more how styles encapsulation work in angular rather specific ng-bootstrap, short answer in default style encapsulation (from https://angular.io/docs/ts/latest/guide/component-styles.html):

component styles apply html in component's own template

since ngb-progressbar not part of component html (it different component altogether) have force styles propagate down components structure:

use /deep/ selector force style down through child component tree child component views. /deep/ selector works depth of nested components, , applies both view children , content children of component

translating particular problem mean should write:

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

here live example in plunker: http://plnkr.co/edit/dwbz0lr55onprz8becki?p=preview

a word of warning: while above works rather create new type of progressbar in css , use type argument ngb-progressbar type input. give chance name new concept trying express here.