feat(module:progress): support TemplateRef for nzFormat (#4598)

* feat(module:progress): support template ref for nzFormat close #4596 * docs: add docs * test: fix tests
NG-ZORRO · Jan 6, 2020 · edf0e9c · edf0e9c
1 parent 038691f
commit edf0e9c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/components/progress/doc/index.en-US.md b/components/progress/doc/index.en-US.md
@@ -24,7 +24,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress';
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzType]` | to set the type | `'line' \| 'circle' \| 'dashboard'` | `'line'` |
-| `[nzFormat]` | template function of the content | `(percent: number) => string` | `percent => percent + '%'` |
+| `[nzFormat]` | template function of the content | `(percent: number) => string \| TemplateRef<{ $implicit: number }>` | `percent => percent + '%'` |
 | `[nzPercent]` | to set the completion percentage | `number` | `0` |
 | `[nzShowInfo]` | whether to display the progress value and the status icon | `boolean` | `true` | ✅ |
 | `[nzStatus]` | to set the status of the Progress | `'success' \| 'exception' \| 'active' \| 'normal'` | - |

diff --git a/components/progress/doc/index.zh-CN.md b/components/progress/doc/index.zh-CN.md
@@ -25,7 +25,7 @@ import { NzProgressModule } from 'ng-zorro-antd/progress';
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzType]` | 类型 | `'line' \| 'circle' \| 'dashboard'` | `'line'` |
-| `[nzFormat]` | 内容的模板函数 | `(percent: number) => string` | `percent => percent + '%'` |
+| `[nzFormat]` | 内容的模板函数 | `(percent: number) => string \| TemplateRef<{ $implicit: number }>` | `percent => percent + '%'` |
 | `[nzPercent]` | 百分比 | `number` | `0` |
 | `[nzShowInfo]` | 是否显示进度数值或状态图标 | `boolean` | `true` | ✅ |
 | `[nzStatus]` | 状态 | `'success' \| 'exception' \| 'active' \| 'normal'` | - |

diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html
@@ -6,7 +6,9 @@
       <i nz-icon [nzType]="icon"></i>
     </ng-container>
     <ng-template #formatTemplate>
-      {{ formatter(nzPercent) }}
+      <ng-container *nzStringTemplateOutlet="formatter; context: { $implicit: nzPercent }">
+        {{ formatter(nzPercent) }}
+      </ng-container>
     </ng-template>
   </span>
 </ng-template>

diff --git a/components/progress/nz-progress.definitions.ts b/components/progress/nz-progress.definitions.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { TemplateRef } from '@angular/core';
 import { NgStyleInterface } from 'ng-zorro-antd/core';
 
 export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right';
@@ -29,7 +30,7 @@ export type NzProgressColorGradient = { direction?: string } & (NzProgressGradie
 
 export type NzProgressStrokeColorType = string | NzProgressColorGradient;
 
-export type NzProgressFormatter = (percent: number) => string;
+export type NzProgressFormatter = ((percent: number) => string) | TemplateRef<{ $implicit: number }>;
 
 export interface NzProgressCirclePath {
   stroke: string | null;

diff --git a/components/progress/nz-progress.module.ts b/components/progress/nz-progress.module.ts
@@ -8,13 +8,14 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzProgressComponent } from './nz-progress.component';
 
 @NgModule({
   exports: [NzProgressComponent],
   declarations: [NzProgressComponent],
-  imports: [CommonModule, NzIconModule]
+  imports: [CommonModule, NzIconModule, NzAddOnModule]
 })
 export class NzProgressModule {}
diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -79,13 +79,17 @@ describe('progress', () => {
       expect(progress.nativeElement.querySelector('.ant-progress')!.classList).not.toContain('ant-progress-status-success');
     });
 
-    it('should format work', () => {
-      testComponent.format = (percent: number) => `${percent} percent`;
+    it('should formatter work', () => {
+      testComponent.formatter = (percent: number) => `${percent} percent`;
       fixture.detectChanges();
       expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0 percent');
       testComponent.percent = 100;
       fixture.detectChanges();
       expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 percent');
+
+      testComponent.formatter = testComponent.formatterTemplate;
+      fixture.detectChanges();
+      expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 / 100');
     });
 
     it('should status work', () => {
@@ -373,7 +377,7 @@ describe('progress', () => {
     <nz-progress
       [nzSize]="size"
       [nzSuccessPercent]="successPercent"
-      [nzFormat]="format"
+      [nzFormat]="formatter"
       [nzStatus]="status"
       [nzShowInfo]="showInfo"
       [nzStrokeWidth]="strokeWidth"
@@ -382,12 +386,14 @@ describe('progress', () => {
       [nzStrokeLinecap]="strokeLinecap"
     >
     </nz-progress>
+    <ng-template #formatterTemplate let-percent> {{ percent }} / 100 </ng-template>
   `
 })
 export class NzTestProgressLineComponent {
+  @ViewChild('formatterTemplate') formatterTemplate: TemplateRef<{ $implicit: number }>;
   size: string;
   status: string;
-  format: NzProgressFormatter;
+  formatter: NzProgressFormatter;
   strokeWidth: number;
   percent = 0;
   successPercent = 0;