fix(module:popover,steps): fix popover always show title placeholder …

…& steps nzDescription property support TemplateRef (#556) * fix(module:popover): fix always show title placeholder * feat(module:steps): nzDescription property support TemplateRef close #555 close #523
NG-ZORRO · Nov 16, 2017 · 4a4e393 · 4a4e393
1 parent 35112e8
commit 4a4e393
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/src/components/popover/nz-popover.component.ts b/src/components/popover/nz-popover.component.ts
@@ -29,7 +29,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
         <div class="ant-popover-content">
           <div class="ant-popover-arrow"></div>
           <div class="ant-popover-inner">
-            <div class="ant-popover-title">{{nzTitle}}</div>
+            <div class="ant-popover-title" *ngIf="nzTitle" [innerHTML]="nzTitle"></div>
             <div class="ant-popover-inner-content">
               <span *ngIf="!nzTemplate">{{nzContent}}</span>
               <ng-template

diff --git a/src/components/steps/nz-step.component.ts b/src/components/steps/nz-step.component.ts
@@ -39,8 +39,10 @@ import { Subscription } from 'rxjs/Subscription';
         </div>
       </div>
       <div class="ant-steps-main">
-        <div class="ant-steps-title">{{nzTitle}}</div>
-        <div class="ant-steps-description">{{nzDescription}}</div>
+        <div class="ant-steps-title" [innerHTML]="nzTitle"></div>
+        <div class="ant-steps-description">
+          <ng-container *ngIf="_description; else _descriptionTpl">{{ _description }}</ng-container>
+        </div>
       </div>
     </div>
   `,
@@ -78,7 +80,15 @@ export class NzStepComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @Input() nzTitle: string;
 
-  @Input() nzDescription: string;
+  _description = '';
+  _descriptionTpl: TemplateRef<any>;
+  @Input()
+  set nzDescription(value: string | TemplateRef<any>) {
+    if (value instanceof TemplateRef)
+        this._descriptionTpl = value;
+    else
+        this._description = value;
+  }
 
   get _current() {
     return this._currentIndex;

diff --git a/src/showcase/nz-demo-steps/index.html b/src/showcase/nz-demo-steps/index.html
@@ -134,7 +134,7 @@ <h3 id="Steps"><span>nz-steps</span>
         <tr>
           <td>nzProgressDot</td>
           <td>通过添加该属性使用点状步骤条</td>
-          <td>attribute</td>
+          <td>Boolean</td>
           <td>-</td>
         </tr>
       </tbody>
@@ -168,8 +168,8 @@ <h3 id="Step"><span>nz-step</span>
         </tr>
         <tr>
           <td>nzDescription</td>
-          <td>步骤的详情描述，可选</td>
-          <td>String</td>
+          <td>步骤的详情描述，可选。如果需传入TemplateRef，可使用<code>template</code>，具体见实例</td>
+          <td>String or TemplateRef</td>
           <td>-</td>
         </tr>
         <tr>

diff --git a/src/showcase/nz-demo-steps/nz-demo-steps-basic.component.ts b/src/showcase/nz-demo-steps/nz-demo-steps-basic.component.ts
@@ -5,7 +5,12 @@ import { Component, OnInit } from '@angular/core';
   template: `
     <nz-steps [(nzCurrent)]="current">
       <nz-step [nzTitle]="'Finished'" [nzDescription]="'This is a description.'"></nz-step>
-      <nz-step [nzTitle]="'In Progress'" [nzDescription]="'This is a description.'"></nz-step>
+      <nz-step [nzTitle]="'In Progress'" [nzDescription]="nzDescription">
+        <ng-template #nzDescription>
+          <p>This is a description.</p>
+          <nz-progress [ngModel]="30" [nzStrokeWidth]="5"></nz-progress>
+        </ng-template>
+      </nz-step>
       <nz-step [nzTitle]="'Waiting'" [nzDescription]="'This is a description.'"></nz-step>
     </nz-steps>
   `

diff --git a/src/showcase/nz-demo-steps/nz-demo-steps.module.ts b/src/showcase/nz-demo-steps/nz-demo-steps.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { NzDemoStepsComponent } from './nz-demo-steps.component';
 import { NzDemoStepsBasicComponent } from './nz-demo-steps-basic.component';
@@ -19,6 +20,7 @@ import { NgZorroAntdModule } from '../../../index.showcase';
 
 @NgModule({
   imports     : [
+    FormsModule,
     CommonModule,
     NzCodeBoxModule,
     NgZorroAntdModule,