fix(carousel): toggle carousel-indicators via property (#3319)

сloses #1021

demo/src/app/components/+carousel/demos/config/config.ts

@@ -5,7 +5,7 @@ import { CarouselConfig } from 'ngx-bootstrap/carousel';
   selector: 'demo-carousel-config',
   templateUrl: './config.html',
   providers: [
-    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } }
+    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true, showIndicators: true } }
   ]
 })
 export class DemoCarouselConfigComponent {}

demo/src/app/components/+carousel/demos/dynamic/dynamic.html

@@ -1,4 +1,4 @@
-<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
+<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex" [showIndicators]="showIndicator">
   <slide *ngFor="let slide of slides; let index=index">
     <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
 
@@ -19,6 +19,9 @@ <h4>Slide {{index}}</h4>
   <button type="button" class="btn btn-info"
           (click)="removeSlide(2)">Remove #3
   </button>
+  <button type="button" class="btn btn-info"
+          (click)="switchIndicator()">Enable/Disable Indicator
+  </button>
 </div>
 <div>
   <div class="checkbox">

demo/src/app/components/+carousel/demos/dynamic/dynamic.ts

@@ -9,6 +9,7 @@ export class DemoCarouselDynamicComponent {
   slides: any[] = [];
   activeSlideIndex: number = 0;
   noWrapSlides: boolean = false;
+  showIndicator: boolean = true;
 
   constructor() {
     for (let i = 0; i < 4; i++) {
@@ -26,4 +27,8 @@ export class DemoCarouselDynamicComponent {
     const toRemove = index ? index : this.activeSlideIndex;
     this.slides.splice(toRemove, 1);
   }
+
+  switchIndicator(): void {
+    this.showIndicator = !this.showIndicator;
+  }
 }

demo/src/ng-api-doc.ts

@@ -370,6 +370,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>If <code>true</code> — will disable pausing on carousel mouse hover </p>\n"
       },
+      {
+        "name": "showIndicators",
+        "type": "boolean",
+        "description": "<p>If <code>true</code> — carousel-indicators are visible</p>\n"
+      },
       {
         "name": "noWrap",
         "type": "boolean",
@@ -532,6 +537,12 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Is loop of auto changing of slides can be paused </p>\n"
       },
+      {
+        "name": "showIndicators",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>Show carousel-indicators </p>\n"
+      },
       {
         "name": "noWrap",
         "defaultValue": "false",

src/carousel/carousel.component.html

@@ -1,5 +1,5 @@
 <div (mouseenter)="pause()" (mouseleave)="play()" (mouseup)="play()" class="carousel slide">
-  <ol class="carousel-indicators" *ngIf="slides.length > 1">
+  <ol class="carousel-indicators" *ngIf="showIndicators && slides.length > 1">
     <li *ngFor="let slidez of slides; let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
   </ol>
   <div class="carousel-inner"><ng-content></ng-content></div>

src/carousel/carousel.component.ts

@@ -42,6 +42,8 @@ export class CarouselComponent implements OnDestroy {
   @Input() noWrap: boolean;
   /**  If `true` — will disable pausing on carousel mouse hover */
   @Input() noPause: boolean;
+  /**  If `true` — carousel-indicators are visible  */
+  @Input() showIndicators: boolean;
 
   /** Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property */
   @Output()

src/carousel/carousel.config.ts

@@ -10,4 +10,7 @@ export class CarouselConfig {
 
   /** Is slides can wrap from the last to the first slide */
   noWrap = false;
+
+  /** Show carousel-indicators */
+  showIndicators = true;
 }

src/spec/carousel.component.spec.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { CarouselModule } from '../carousel/carousel.module';
 
 @Component({selector: 'carousel-test', template: ''})
 class TestCarouselComponent {
   myInterval = 5000;
   noWrapSlides = false;
+  showIndicators = true;
   slides: any[] = [
     {image: '//placekitten.com/600/300', text: 'slide0'},
     {image: '//placekitten.com/600/300', text: 'slide1'},
@@ -16,7 +16,7 @@ class TestCarouselComponent {
 
 const html = `
   <div id="c1">
-    <carousel [interval]="myInterval" [noWrap]="noWrapSlides">
+    <carousel [interval]="myInterval" [noWrap]="noWrapSlides" [showIndicators]="showIndicators">
       <slide *ngFor="let slide of slides; let index=index"
              [active]="slide.active">
         <img [src]="slide.image" style="margin:auto;">
@@ -153,6 +153,12 @@ describe('Component: Carousel', () => {
     expectActiveSlides(element, [false, true, false]);
   });
 
+  it('should hide carousel-indicators if property showIndicators is == false', () => {
+    context.showIndicators = false;
+    fixture.detectChanges();
+    expect(element.querySelector('ol')).toBeNull();
+  });
+
   it('should change slide on carousel control click', () => {
     const prev = element.querySelector('a.left');
     const next = element.querySelector('a.right');

src/spec/ng-bootstrap/carousel.spec.ts

@@ -56,6 +56,7 @@ describe('ngb-carousel', () => {
 
     expect(carousel.interval).toBe(defaultConfig.interval);
     expect(carousel.noWrap).toBe(defaultConfig.noWrap);
+    expect(carousel.showIndicators).toBe(defaultConfig.showIndicators);
     // expect(carousel.keyboard).toBe(defaultConfig.keyboard);
   });
 
@@ -463,6 +464,7 @@ describe('ngb-carousel', () => {
         config = c;
         config.interval = 1000;
         config.noWrap = true;
+        config.showIndicators = true;
         // config.keyboard = false;
       })
     );
@@ -474,6 +476,7 @@ describe('ngb-carousel', () => {
       const carousel = fixture.componentInstance;
       expect(carousel.interval).toBe(config.interval);
       expect(carousel.noWrap).toBe(config.noWrap);
+      expect(carousel.showIndicators).toBe(config.showIndicators);
       // expect(carousel.keyboard).toBe(config.keyboard);
     });
   });
@@ -482,6 +485,7 @@ describe('ngb-carousel', () => {
     const config = new CarouselConfig();
     config.interval = 1000;
     config.noWrap = true;
+    config.showIndicators = true;
     // config.keyboard = false;
 
     beforeEach(() => {
@@ -498,6 +502,7 @@ describe('ngb-carousel', () => {
       const carousel = fixture.componentInstance;
       expect(carousel.interval).toBe(config.interval);
       expect(carousel.noWrap).toBe(config.noWrap);
+      expect(carousel.showIndicators).toBe(config.showIndicators);
       // expect(carousel.keyboard).toBe(config.keyboard);
     });
   });