Add carousel navigation buttons template

CHANGELOG.md

@@ -62,6 +62,8 @@ All notable changes for each version of this project will be documented in this
         - `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
         - `animationType` input is added, which can be used to set animation when changing slides
         - `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
+        - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
+        - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
 
 ## 8.2.6
 

projects/igniteui-angular/src/lib/carousel/README.md

@@ -42,16 +42,40 @@ Keyboard navigation will be enabled when the **IgxCarousel** component is focuse
 - `End` will focus the last slide inside the carousel view.
 
 ### Templates
-The **IgxCarousel** supports templating of its indicators
+The **IgxCarousel** supports templating indicators and navigation buttons
 
 #### Defining item template:
 ```html
 <igx-carousel #carousel>
         ...
-<ng-template igxCarouselIndicator let-slide>
-    <igx-icon *ngIf="slide.active"  fontSet="material">brightness_7</igx-icon>
-    <igx-icon *ngIf="!slide.active"  fontSet="material">brightness_5</igx-icon>
-</ng-template>
+    <ng-template igxCarouselIndicator let-slide>
+        <igx-icon *ngIf="slide.active"  fontSet="material">brightness_7</igx-icon>
+        <igx-icon *ngIf="!slide.active"  fontSet="material">brightness_5</igx-icon>
+    </ng-template>
+</igx-carousel>
+```
+
+#### Defining next button template:
+```html
+<igx-carousel #carousel>
+        ...
+    <ng-template igxCarouselNextButton let-disabled>
+        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+            <igx-icon fontSet="material">add</igx-icon>
+        </button>
+    </ng-template>
+</igx-carousel>
+```
+
+#### Defining previous button template:
+```html
+<igx-carousel #carousel>
+        ...
+    <ng-template igxCarouselPrevButton let-disabled>
+        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+            <igx-icon fontSet="material">remove</igx-icon>
+        </button>
+    </ng-template>
 </igx-carousel>
 ```
 

projects/igniteui-angular/src/lib/carousel/carousel.component.html

@@ -5,6 +5,22 @@
     </div>
 </ng-template>
 
+<ng-template #defaultNextButton let-disabled>
+    <a class="igx-nav-arrow"
+        [class.igx-nav-arrow--disabled]="disabled"
+    >
+        <igx-icon fontSet="material">arrow_forward</igx-icon>
+    </a>
+</ng-template>
+
+<ng-template #defaultPrevButton let-disabled>
+    <a class="igx-nav-arrow"
+        [class.igx-nav-arrow--disabled]="disabled"
+    >
+        <igx-icon fontSet="material">arrow_back</igx-icon>
+    </a>
+</ng-template>
+
 
 <div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass">
     <div *ngFor="let slide of slides"
@@ -24,12 +40,13 @@
     <ng-content></ng-content>
 </div>
 
-<ng-container *ngIf="navigation">
-    <a role="button" tabindex="0" class="igx-carousel__arrow--prev" (click)="prev()" [hidden]="!slides.length">
-        <igx-icon fontSet="material">arrow_back</igx-icon>
-    </a>
-    <a role="button" tabindex="0" class="igx-carousel__arrow--next" (click)="next()" [hidden]="!slides.length">
-        <igx-icon fontSet="material">arrow_forward</igx-icon>
-    </a>
-</ng-container>
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" (click)="prev()">
+    <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
+</div>
+
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" (click)="next()">
+    <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
+</div>
+
+
 

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -515,7 +515,7 @@ describe('Carousel', () => {
     });
 
     describe('Templates Tests: ', () => {
-        it('verify that template can be defined in the markup', () => {
+        it('verify that templates can be defined in the markup', () => {
             fixture = TestBed.createComponent(CarouselTemplateSetInMarkupTestComponent);
             carousel = fixture.componentInstance.carousel;
             fixture.detectChanges();
@@ -526,9 +526,15 @@ describe('Carousel', () => {
                 const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement;
                 expect(indicator.innerText).toEqual(index.toString());
             }
+
+            expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeNull();
+            expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeNull();
+
+            expect(HelperTestFunctions.getNextButton(fixture).innerText).toEqual('next');
+            expect(HelperTestFunctions.getPreviousButton(fixture).innerText).toEqual('prev');
         });
 
-        it('verify that template can be changed', () => {
+        it('verify that templates can be changed', () => {
             fixture = TestBed.createComponent(CarouselTemplateSetInTypescriptTestComponent);
             carousel = fixture.componentInstance.carousel;
             fixture.detectChanges();
@@ -538,8 +544,12 @@ describe('Carousel', () => {
 
             expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
             expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+            expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeDefined();
+            expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeDefined();
 
             carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate1;
+            carousel.nextButtonTemplate = fixture.componentInstance.customNextTemplate;
+            carousel.prevButtonTemplate = fixture.componentInstance.customPrevTemplate;
             fixture.detectChanges();
 
             expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
@@ -548,6 +558,11 @@ describe('Carousel', () => {
                 const indicator = HelperTestFunctions.getIndicators(fixture)[index] as HTMLElement;
                 expect(indicator.innerText).toEqual(index.toString());
             }
+            expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeNull();
+            expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeNull();
+
+            expect(HelperTestFunctions.getNextButton(fixture).innerText).toEqual('next');
+            expect(HelperTestFunctions.getPreviousButton(fixture).innerText).toEqual('prev');
 
             carousel.indicatorTemplate = fixture.componentInstance.customIndicatorTemplate2;
             fixture.detectChanges();
@@ -565,10 +580,14 @@ describe('Carousel', () => {
             }
 
             carousel.indicatorTemplate = null;
+            carousel.nextButtonTemplate = null;
+            carousel.prevButtonTemplate = null;
             fixture.detectChanges();
 
             expect(HelperTestFunctions.getIndicators(fixture).length).toBe(4);
             expect(HelperTestFunctions.getIndicatorsDots(fixture).length).toBe(4);
+            expect(HelperTestFunctions.getNextButtonArrow(fixture)).toBeDefined();
+            expect(HelperTestFunctions.getPreviousButtonArrow(fixture)).toBeDefined();
         });
     });
 
@@ -704,8 +723,8 @@ describe('Carousel', () => {
             expect(carousel.total).toEqual(0);
             expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeNull();
             expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeNull();
-            expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeTruthy();
-            expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeTruthy();
+            expect(HelperTestFunctions.getNextButton(fixture)).toBeNull();
+            expect(HelperTestFunctions.getPreviousButton(fixture)).toBeNull();
 
             // add a slide
             fixture.componentInstance.addSlides();
@@ -724,6 +743,7 @@ describe('Carousel', () => {
 class HelperTestFunctions {
     public static NEXT_BUTTON_CLASS = '.igx-carousel__arrow--next';
     public static PRIV_BUTTON_CLASS = '.igx-carousel__arrow--prev';
+    public static BUTTON_ARROW_CLASS = '.igx-nav-arrow';
     public static ACTIVE_SLIDE_CLASS = 'igx-slide--current';
     public static PREVIOUS_SLIDE_CLASS = 'igx-slide--previous';
     public static INDICATORS_TOP_CLASS = '.igx-carousel-indicators--top';
@@ -741,6 +761,16 @@ class HelperTestFunctions {
         return fixture.nativeElement.querySelector(HelperTestFunctions.PRIV_BUTTON_CLASS);
     }
 
+    public static getNextButtonArrow(fixture): HTMLElement {
+        const next = HelperTestFunctions.getNextButton(fixture);
+        return next.querySelector(HelperTestFunctions.BUTTON_ARROW_CLASS);
+    }
+
+    public static getPreviousButtonArrow(fixture): HTMLElement {
+        const prev = HelperTestFunctions.getPreviousButton(fixture);
+        return prev.querySelector(HelperTestFunctions.BUTTON_ARROW_CLASS);
+    }
+
     public static getIndicatorsContainer(fixture, position = CarouselIndicatorsOrientation.bottom): HTMLElement {
         const carouselNative = fixture.nativeElement;
         if (position === CarouselIndicatorsOrientation.bottom) {
@@ -819,6 +849,14 @@ class CarouselAnimationsComponent {
             <ng-template igxCarouselIndicator let-slide>
                 <span> {{slide.index}} </span>
             </ng-template>
+
+            <ng-template igxCarouselNextButton>
+                <span>next</span>
+            </ng-template>
+
+            <ng-template igxCarouselPrevButton>
+                <span>prev</span>
+            </ng-template>
         </igx-carousel>
     `
 })
@@ -837,6 +875,14 @@ class CarouselTemplateSetInMarkupTestComponent {
             <span *ngIf="slide.active"> {{slide.index}}: Active  </span>
         </ng-template>
 
+        <ng-template #customNextTemplate>
+            <span>next</span>
+        </ng-template>
+
+        <ng-template #customPrevTemplate>
+            <span>prev</span>
+        </ng-template>
+
         <igx-carousel #carousel [animationType]="'none'">
             <igx-slide><h3>Slide1</h3></igx-slide>
             <igx-slide><h3>Slide2</h3></igx-slide>
@@ -851,6 +897,10 @@ class CarouselTemplateSetInTypescriptTestComponent {
     public customIndicatorTemplate1;
     @ViewChild('customIndicatorTemplate2', { read: TemplateRef, static: false })
     public customIndicatorTemplate2;
+    @ViewChild('customNextTemplate', { read: TemplateRef, static: false })
+    public customNextTemplate;
+    @ViewChild('customPrevTemplate', { read: TemplateRef, static: false })
+    public customPrevTemplate;
 }
 
 @Component({