feat(module:slider): add the ability to use a template (#7505)

Author: volvachev

components/slider/demo/tip-formatter.ts

@@ -5,6 +5,10 @@ import { Component } from '@angular/core';
   template: `
     <nz-slider [nzTipFormatter]="formatter"></nz-slider>
     <nz-slider [nzTipFormatter]="null"></nz-slider>
+    <nz-slider [nzTipFormatter]="titleTemplate"></nz-slider>
+    <ng-template #titleTemplate let-value>
+      <span>Slider value: {{ value }}</span>
+    </ng-template>
   `
 })
 export class NzDemoSliderTipFormatterComponent {

components/slider/doc/index.en-US.md

@@ -29,7 +29,7 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[nzMin]` | The minimum value the slider can slide to. | `number` | `0` |
 | `[nzRange]` | dual thumb mode | `boolean` | `false` |
 | `[nzStep]` | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When  `marks` no null, `step` can be `null`. | `number \| null` | `1` |
-| `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string` | - |
+| `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string \| TemplateRef<void>` | - |
 | `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
 | `[nzReverse]` | Reverse the component | `boolean` | `false` |

components/slider/doc/index.zh-CN.md

@@ -30,7 +30,7 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[nzMin]` | 最小值 | `number` | `0` |
 | `[nzRange]` | 双滑块模式 | `boolean` | `false` |
 | `[nzStep]` | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | `number \| null` | `1` |
-| `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string` | - |
+| `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string \| TemplateRef<void>` | - |
 | `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
 | `[nzReverse]` | 反向坐标轴 | `boolean` | `false` |

components/slider/handle.component.ts

@@ -12,11 +12,12 @@ import {
   Input,
   OnChanges,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 
-import { BooleanInput, NgStyleInterface } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
@@ -37,6 +38,7 @@ import { NzSliderShowTooltip } from './typings';
       nz-tooltip
       [ngStyle]="style"
       [nzTooltipTitle]="tooltipFormatter === null || tooltipVisible === 'never' ? null : tooltipTitle"
+      [nzTooltipTitleContext]="{ $implicit: value }"
       [nzTooltipTrigger]="null"
       [nzTooltipPlacement]="tooltipPlacement"
     ></div>
@@ -58,11 +60,11 @@ export class NzSliderHandleComponent implements OnChanges {
   @Input() value?: number;
   @Input() tooltipVisible: NzSliderShowTooltip = 'default';
   @Input() tooltipPlacement?: string;
-  @Input() tooltipFormatter?: null | ((value: number) => string);
+  @Input() tooltipFormatter?: null | ((value: number) => string) | TemplateRef<void>;
   @Input() @InputBoolean() active = false;
   @Input() dir: Direction = 'ltr';
 
-  tooltipTitle?: string;
+  tooltipTitle?: NzTSType;
   style: NgStyleInterface = {};
 
   constructor(private sliderService: NzSliderService, private cdr: ChangeDetectorRef) {}
@@ -124,7 +126,12 @@ export class NzSliderHandleComponent implements OnChanges {
   }
 
   private updateTooltipTitle(): void {
-    this.tooltipTitle = this.tooltipFormatter ? this.tooltipFormatter(this.value!) : `${this.value}`;
+    if (this.tooltipFormatter) {
+      this.tooltipTitle =
+        typeof this.tooltipFormatter === 'function' ? this.tooltipFormatter(this.value!) : this.tooltipFormatter;
+    } else {
+      this.tooltipTitle = `${this.value}`;
+    }
   }
 
   private updateTooltipPosition(): void {

components/slider/slider.component.ts

@@ -20,6 +20,7 @@ import {
   Output,
   QueryList,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
   ViewChildren,
   ViewEncapsulation,
@@ -147,7 +148,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   @Input() @InputNumber() nzStep = 1;
   @Input() nzTooltipVisible: NzSliderShowTooltip = 'default';
   @Input() nzTooltipPlacement: string = 'top';
-  @Input() nzTipFormatter?: null | ((value: number) => string);
+  @Input() nzTipFormatter?: null | ((value: number) => string) | TemplateRef<void>;
 
   @Output() readonly nzOnAfterChange = new EventEmitter<NzSliderValue>();
 

components/slider/slider.spec.ts

@@ -221,6 +221,46 @@ describe('nz-slider', () => {
     }));
   });
 
+  describe('show template tooltip', () => {
+    let testBed: ComponentBed<SliderShowTemplateTooltipComponent>;
+    let fixture: ComponentFixture<SliderShowTemplateTooltipComponent>;
+    let testComponent: SliderShowTemplateTooltipComponent;
+
+    beforeEach(() => {
+      testBed = createComponentBed(SliderShowTemplateTooltipComponent, {
+        imports: [NzSliderModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule]
+      });
+      fixture = testBed.fixture;
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      sliderDebugElement = fixture.debugElement.query(By.directive(NzSliderComponent));
+      sliderInstance = sliderDebugElement.injector.get<NzSliderComponent>(NzSliderComponent);
+      sliderNativeElement = sliderInstance.slider.nativeElement;
+    });
+
+    beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+      overlayContainerElement = oc.getContainerElement();
+    }));
+
+    it('should preview template tooltip', fakeAsync(() => {
+      testComponent.show = 'always';
+      fixture.detectChanges();
+      tick(400);
+      fixture.detectChanges();
+      expect(overlayContainerElement.textContent).toContain('Slider value: 0');
+
+      dispatchClickEventSequence(sliderNativeElement, 0.13);
+      fixture.detectChanges();
+      expect(overlayContainerElement.textContent).toContain('Slider value: 13');
+
+      // Always show tooltip even when handle is not hovered.
+      fixture.detectChanges();
+      expect(overlayContainerElement.textContent).toContain('Slider value: 13');
+
+      tick(400);
+    }));
+  });
+
   describe('setting value', () => {
     let testBed: ComponentBed<SliderWithValueComponent>;
     let fixture: ComponentFixture<SliderWithValueComponent>;
@@ -1191,6 +1231,19 @@ class NzTestSliderKeyboardComponent {
   disabled = false;
 }
 
+@Component({
+  template: `
+    <nz-slider [nzTooltipVisible]="show" [ngModel]="value" [nzTipFormatter]="titleTemplate"></nz-slider>
+    <ng-template #titleTemplate let-value>
+      <span>Slider value: {{ value }}</span>
+    </ng-template>
+  `
+})
+class SliderShowTemplateTooltipComponent {
+  show: NzSliderShowTooltip = 'default';
+  value = 0;
+}
+
 /**
  * Dispatches a click event sequence (consisting of moueseenter, click) from an element.
  * Note: The mouse event truncates the position for the click.

components/tooltip/tooltip.ts

@@ -80,7 +80,7 @@ export class NzTooltipDirective extends NzTooltipBaseDirective {
     return {
       ...super.getProxyPropertyMap(),
       nzTooltipColor: ['nzColor', () => this.nzTooltipColor],
-      nzTooltipTitleContext: ['nzTitleContext', () => this.titleContext]
+      titleContext: ['nzTitleContext', () => this.titleContext]
     };
   }
 }