title: How modify CSS of ng-bootstrap carousel using Angular 2
body: <p>recently, I have tried to modify the class "carousel-item" inside ng-bootstrap carousel component. However, I found that I need to add "encapsulation: ViewEncapsulation.None" in the metadata. Using this solution would also change the css on the other carousel component. Is there any other solution to modified the css class inside ng-bootstrap carousel component.</p>
  
  <p>Here is my code:</p>
  
  <p>my ts file:</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    moduleId: module.id,
    selector: 'carousel',
    templateUrl: 'carousel.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls : ['./carousel.component.scss'],
    providers: [NgbCarouselConfig]
  })
  
  export class CarouselComponent implements OnInit {
    constructor(config: NgbCarouselConfig) {
      // customize default values of carousels used by this component tree
      config.interval = 10;
      config.wrap = false;
      config.keyboard = false;
    }
  
    ngOnInit() { }
  }
  </code></pre>
  
  <p>my View "carousel.component.html":</p>
  
  <pre><code>&lt;ngb-carousel&gt;
    &lt;template ngbSlide&gt;
      &lt;img src="http://lorempixel.com/900/500?r=4" alt="Random first slide"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;10 seconds between slides...&lt;/h3&gt;
        &lt;p&gt;This carousel uses customized default values.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/ngb-carousel&gt;
  </code></pre>
  
  <p>And my style sheet "carousel.component.scss":</p>
  
  <pre><code>  .carousel-item.active{
      display:inline;
      img{
        width: 100%;
      }
    }
  </code></pre>