just use one component

components/modal/nz-modal.module.ts

@@ -13,7 +13,7 @@ import { NzModalService } from './nz-modal.service';
 
 @NgModule({
   imports: [ CommonModule, OverlayModule, NzI18nModule, NzButtonModule, LoggerModule ],
-  exports: [ NzModalComponent, CssUnitPipe ],
+  exports: [ NzModalComponent ],
   declarations: [ NzModalComponent, CssUnitPipe ],
   entryComponents: [ NzModalComponent ],
   providers: [ NzModalControlService, NzModalService ]

components/ng-zorro-antd.module.ts

@@ -36,7 +36,7 @@ import { NzProgressModule } from './progress/nz-progress.module';
 import { NzRadioModule } from './radio/nz-radio.module';
 import { NzRateModule } from './rate/nz-rate.module';
 import { NzSelectModule } from './select/nz-select.module';
-import { NzSkeletonModule } from './skeleton';
+import { NzSkeletonModule } from './skeleton/nz-skeleton.module';
 import { NzSliderModule } from './slider/nz-slider.module';
 import { NzSpinModule } from './spin/nz-spin.module';
 import { NzStepsModule } from './steps/nz-steps.module';

components/skeleton/css-unit.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 /**
- * also use in NzMoDule
+ * also use in NzModal
  * consider to extract it as a shared pipe?
  */
 @Pipe({

components/skeleton/demo/basic.ts

@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
     <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
       <ng-template #item let-item>
         <nz-list-item>
-          <nz-skeleton [nzTitle]="true" [nzLoading]="loading">
+          <nz-skeleton [nzAvatar]="true" [nzTitle]="true" [nzLoading]="loading">
             <nz-list-item-meta
               [nzTitle]="nzTitle"
               nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
@@ -29,8 +29,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NzDemoSkeletonBasicComponent implements OnInit {
   listData = [];
-
-  constructor() { }
+  loading = false;
 
   ngOnInit(): void {
     for (let i = 0; i < 9; i++) {

components/skeleton/demo/card.ts

@@ -6,11 +6,9 @@ import { Component } from '@angular/core';
     <nz-switch [(ngModel)]="loading"></nz-switch>
     <nz-card
       style="width: 300;margin-top: 16px"
-      [nzActions]="[actionSetting,actionEdit,actionEllipsis]"
-    >
+      [nzActions]="[actionSetting,actionEdit,actionEllipsis]">
       <nz-skeleton [nzLoading]="loading">
         <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
-        />
       </nz-skeleton>
     </nz-card>
     <ng-template #avatarTemplate>
@@ -29,4 +27,4 @@ import { Component } from '@angular/core';
 })
 export class NzDemoSkeletonCardComponent {
   loading = false;
-}
+}

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

@@ -5,38 +5,38 @@ title: Skeleton
 cols: 1
 ---
 
-Let user to have the anticipation for waiting.
-Which helps to make the loading process more smooth.
+Let user to have the anticipation for waiting,
+which helps to make the loading process more smooth.
 
 ## When To Use
 
-- When resource need long time loading, like low network speed
-- The component contains much information. Such as List or Card
+- When resource need long time loading, like low network speed.
+- The component contains much information. Such as List or Card.
 
 
 ## API
 
-### Skeleton
+### nz-skeleton
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| loading | Display the skeleton when `true` | boolean | - |
-| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
-| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
-| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
+| `[nzLoading]` | Display the skeleton when `true` | boolean | - |
+| `[nzAvatar]` | Show avatar placeholder | boolean ｜ NzSkeletonAvatar | false |
+| `[nzTitle]` | Show title placeholder | boolean ｜ NzSkeletonTitle | true |
+| `[nzParagraph]` | Show paragraph placeholder | boolean ｜ NzSkeletonParagraph | true |
 
-### SkeletonAvatarProps
+### NzSkeletonAvatar
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| size | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
-| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
+| `size` | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
+| `shape` | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
 
-### SkeletonTitleProps
+### NzSkeletonTitle
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| width | Set the width of title | number \| string | - |
+| `width` | Set the width of title | number ｜ string | - |
 
-### SkeletonParagraphProps
+### NzSkeletonParagraph
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| rows | Set the row count of paragraph | number | - |
-| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
+| `rows` | Set the row count of paragraph | number | - |
+| `width` | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number ｜ string ｜ Array<number ｜ string> | - |

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

@@ -16,27 +16,27 @@ cols: 1
 
 ## API
 
-### Skeleton
+### nz-skeleton
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
-| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
-| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
-| paragraph | 是否显示段落占位图 | boolean|[SkeletonParagraphProps](#SkeletonParagraphProps) | true |
+| `[nzLoading]` | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| `[nzAvatar]` | 是否显示头像占位图 | boolean ｜ NzSkeletonAvatar | false |
+| `[nzTitle]` | 是否显示标题占位图 | boolean ｜ NzSkeletonTitle | true |
+| `[nzParagraph]` | 是否显示段落占位图 | boolean ｜ NzSkeletonParagraph | true |
 
-### SkeletonAvatarProps
+### NzSkeletonAvatar
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
-| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
+| `size` | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
+| `shape` | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
 
-### SkeletonTitleProps
+### NzSkeletonTitle
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| width | 设置标题占位图的宽度 | number|string | - |
+| `width` | 设置标题占位图的宽度 | number ｜ string | - |
 
-### SkeletonParagraphProps
+### NzSkeletonParagraph
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| rows | 设置段落占位图的行数 | number | - |
-| width | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number|string|Array<number|string> | - |
+| `rows` | 设置段落占位图的行数 | number | - |
+| `width` | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number ｜ string ｜ Array<number｜string> | - |

components/skeleton/nz-skeleton.component.html

@@ -1,17 +1,16 @@
 <ng-container *ngIf="nzLoading">
   <div class="ant-skeleton-header">
-    <nz-skeleton-avatar *ngIf="nzAvatar"
-      [nzSize]="nzAvatar.size"
-      [nzShape]="nzAvatar.shape">
-    </nz-skeleton-avatar>
+    <span *ngIf="nzAvatar" 
+      class="ant-skeleton-avatar" 
+      [ngClass]="avartarClassMap">
+    </span>
   </div>
   <div class="ant-skeleton-content">
-    <nz-skeleton-title *ngIf="nzTitle" [nzWidth]="nzTitle.width">
-    </nz-skeleton-title>
-    <nz-skeleton-paragraph *ngIf="nzParagraph"
-      [nzRows]="nzParagraph.rows"
-      [nzWidth]="nzParagraph.width"
-    ></nz-skeleton-paragraph>
+    <h3 *ngIf="nzTitle" class="ant-skeleton-title" [style.width]="nzTitle.width"></h3>
+    <ul *ngIf="nzParagraph" class="ant-skeleton-paragraph">
+      <li *ngFor="let row of _rowsList;let i=index" [style.width]="(_widthList[i]||'100%') | toCssUnit">
+      </li>
+    </ul>
   </div>
 </ng-container>
 <ng-container *ngIf="!nzLoading">