From 00dc5c07b7b835c61536e64ad5689b1f9cfbf1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= <cipchk@qq.com>
Date: Thu, 16 Nov 2017 16:15:49 +0800
Subject: [PATCH] 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
---
 src/components/popover/nz-popover.component.ts   |  2 +-
 src/components/steps/nz-step.component.ts        | 16 +++++++++++++---
 src/showcase/nz-demo-steps/index.html            |  6 +++---
 .../nz-demo-steps-basic.component.ts             |  7 ++++++-
 .../nz-demo-steps/nz-demo-steps.module.ts        |  2 ++
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/popover/nz-popover.component.ts b/src/components/popover/nz-popover.component.ts
index fb9073647af..df957582014 100644
--- 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
index b72a899a2e2..056876b687a 100644
--- 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
index 122301b0169..2a60e523069 100644
--- 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
index 433d8c1e84b..c7d0c4db775 100644
--- 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
index dd5ec5738e7..63f71358bf2 100644
--- 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,