diff --git a/.eslintrc.js b/.eslintrc.js
index ec272ae71f..659960753c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -178,7 +178,9 @@ module.exports = {
     {
       files: ['*.html'],
       extends: ['plugin:@angular-eslint/template/recommended'],
-      rules: {}
+      rules: {
+        "@angular-eslint/template/prefer-self-closing-tags": "error"
+      }
     },
     {
       files: ['*.html'],
diff --git a/packages/abc/avatar-list/avatar-list-item.component.ts b/packages/abc/avatar-list/avatar-list-item.component.ts
index 942e4add51..f90a9f4b2f 100644
--- a/packages/abc/avatar-list/avatar-list-item.component.ts
+++ b/packages/abc/avatar-list/avatar-list-item.component.ts
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 @Component({
   selector: 'avatar-list-item, [avatar-list-item]',
   exportAs: 'avatarListItem',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
diff --git a/packages/abc/avatar-list/avatar-list.component.html b/packages/abc/avatar-list/avatar-list.component.html
index baf6e43d4d..0e724cbbeb 100644
--- a/packages/abc/avatar-list/avatar-list.component.html
+++ b/packages/abc/avatar-list/avatar-list.component.html
@@ -8,15 +8,10 @@
       [nzText]="i.text"
       [nzIcon]="i.icon"
       [nzSize]="avatarSize"
-    ></nz-avatar>
-    <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize"></nz-avatar>
+    />
+    <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize" />
   </li>
   <li *ngIf="exceedCount > 0" [ngClass]="cls">
-    <nz-avatar
-      [nzSize]="avatarSize"
-      style="cursor: auto"
-      [ngStyle]="excessItemsStyle"
-      [nzText]="'+' + exceedCount"
-    ></nz-avatar>
+    <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [ngStyle]="excessItemsStyle" [nzText]="'+' + exceedCount" />
   </li>
 </ul>
diff --git a/packages/abc/avatar-list/avatar-list.spec.ts b/packages/abc/avatar-list/avatar-list.spec.ts
index 1fd4282175..6b8e753acc 100644
--- a/packages/abc/avatar-list/avatar-list.spec.ts
+++ b/packages/abc/avatar-list/avatar-list.spec.ts
@@ -68,20 +68,11 @@ describe('abc: avatar-list', () => {
 @Component({
   template: `
     <avatar-list [size]="size" [maxLength]="maxLength">
-      <avatar-list-item
-        tips="Jake"
-        src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
-      ></avatar-list-item>
-      <avatar-list-item
-        tips="Andy"
-        src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
-      ></avatar-list-item>
-      <avatar-list-item
-        tips="Niko"
-        src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
-      ></avatar-list-item>
-      <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
-      <avatar-list-item tips="heart-o"></avatar-list-item>
+      <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+      <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+      <avatar-list-item tips="Cipchk" text="Cipchk" />
+      <avatar-list-item tips="heart-o" />
     </avatar-list>
   `
 })
diff --git a/packages/abc/count-down/count-down.component.ts b/packages/abc/count-down/count-down.component.ts
index 976f72f549..233ac2bc9a 100644
--- a/packages/abc/count-down/count-down.component.ts
+++ b/packages/abc/count-down/count-down.component.ts
@@ -14,7 +14,7 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
 @Component({
   selector: 'count-down',
   exportAs: 'countDown',
-  template: ` <countdown #cd *ngIf="config" [config]="config" (event)="handleEvent($event)"></countdown> `,
+  template: `<countdown #cd *ngIf="config" [config]="config" (event)="handleEvent($event)" />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
diff --git a/packages/abc/count-down/count-down.spec.ts b/packages/abc/count-down/count-down.spec.ts
index 095b4c26f0..d746d318e8 100644
--- a/packages/abc/count-down/count-down.spec.ts
+++ b/packages/abc/count-down/count-down.spec.ts
@@ -51,10 +51,10 @@ describe('abc: count-down', () => {
 @Component({
   template: `
     <div *ngIf="config">
-      <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px"></count-down>
+      <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px" />
     </div>
     <div *ngIf="target">
-      <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px"></count-down>
+      <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px" />
     </div>
   `
 })
diff --git a/packages/abc/date-picker/range.directive.spec.ts b/packages/abc/date-picker/range.directive.spec.ts
index 25d5ba7bf0..686a4e4ab3 100644
--- a/packages/abc/date-picker/range.directive.spec.ts
+++ b/packages/abc/date-picker/range.directive.spec.ts
@@ -117,7 +117,7 @@ describe('abc: date-picker: nz-range-picker[extend]', () => {
       extend
       [(ngModelEnd)]="i.end"
       [shortcut]="shortcut"
-    ></nz-range-picker>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/abc/ellipsis/ellipsis.component.html b/packages/abc/ellipsis/ellipsis.component.html
index e5a7b03a67..dfdc9fa0b5 100644
--- a/packages/abc/ellipsis/ellipsis.component.html
+++ b/packages/abc/ellipsis/ellipsis.component.html
@@ -1,4 +1,4 @@
-<div (cdkObserveContent)="refresh()" #orgEl style="display: none"><ng-content></ng-content></div>
+<div (cdkObserveContent)="refresh()" #orgEl style="display: none"><ng-content /></div>
 <ng-template #tooltipTpl let-con>
   <span
     *ngIf="tooltip; else con"
@@ -6,7 +6,7 @@
     [nzTooltipTitle]="titleTpl"
     [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }"
   >
-    <ng-container *ngTemplateOutlet="con"></ng-container>
+    <ng-container *ngTemplateOutlet="con" />
     <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
   </span>
 </ng-template>
diff --git a/packages/abc/error-collect/error-collect.spec.ts b/packages/abc/error-collect/error-collect.spec.ts
index 091406de31..840dcdcc9a 100644
--- a/packages/abc/error-collect/error-collect.spec.ts
+++ b/packages/abc/error-collect/error-collect.spec.ts
@@ -80,7 +80,7 @@ describe('abc: error-collect', () => {
 
   it('should be throw [No found form element] if no form element', () => {
     expect(() => {
-      TestBed.overrideTemplate(TestComponent, `<error-collect #ec [freq]="freq"></error-collect>`)
+      TestBed.overrideTemplate(TestComponent, `<error-collect #ec [freq]="freq" />`)
         .createComponent(TestComponent)
         .detectChanges();
     }).toThrowError('No found form element');
@@ -95,7 +95,7 @@ describe('abc: error-collect', () => {
           <input nz-input formControlName="email" id="email" />
         </nz-form-control>
       </nz-form-item>
-      <error-collect #ec [freq]="freq" [offsetTop]="offsetTop"></error-collect>
+      <error-collect #ec [freq]="freq" [offsetTop]="offsetTop" />
     </form>
   `
 })
diff --git a/packages/abc/exception/exception.component.html b/packages/abc/exception/exception.component.html
index 919e0260a4..711fe8a2e4 100644
--- a/packages/abc/exception/exception.component.html
+++ b/packages/abc/exception/exception.component.html
@@ -6,7 +6,7 @@ <h1 class="exception__cont-title" [innerHTML]="_title"></h1>
   <div class="exception__cont-desc" [innerHTML]="_desc || locale[_type]"></div>
   <div class="exception__cont-actions">
     <div (cdkObserveContent)="checkContent()" #conTpl>
-      <ng-content></ng-content>
+      <ng-content />
     </div>
     <button *ngIf="!hasCon" nz-button [routerLink]="backRouterLink" [nzType]="'primary'">
       {{ locale.backToHome }}
diff --git a/packages/abc/footer-toolbar/footer-toolbar.component.html b/packages/abc/footer-toolbar/footer-toolbar.component.html
index bec450506e..8ebe9798f4 100644
--- a/packages/abc/footer-toolbar/footer-toolbar.component.html
+++ b/packages/abc/footer-toolbar/footer-toolbar.component.html
@@ -2,6 +2,6 @@
   <ng-container *nzStringTemplateOutlet="extra">{{ extra }}</ng-container>
 </div>
 <div class="footer-toolbar__right">
-  <error-collect *ngIf="errorCollect"></error-collect>
-  <ng-content></ng-content>
+  <error-collect *ngIf="errorCollect" />
+  <ng-content />
 </div>
diff --git a/packages/abc/footer-toolbar/footer-toolbar.spec.ts b/packages/abc/footer-toolbar/footer-toolbar.spec.ts
index d6c799c1b7..2d6139dd4a 100644
--- a/packages/abc/footer-toolbar/footer-toolbar.spec.ts
+++ b/packages/abc/footer-toolbar/footer-toolbar.spec.ts
@@ -58,7 +58,7 @@ describe('abc: footer-toolbar', () => {
 });
 
 @Component({
-  template: ` <form><footer-toolbar [errorCollect]="errorCollect" [extra]="extra"></footer-toolbar></form> `
+  template: ` <form><footer-toolbar [errorCollect]="errorCollect" [extra]="extra" /></form> `
 })
 class TestComponent {
   errorCollect = true;
diff --git a/packages/abc/full-content/full-content.component.ts b/packages/abc/full-content/full-content.component.ts
index e38215e25d..dd3675fe7b 100644
--- a/packages/abc/full-content/full-content.component.ts
+++ b/packages/abc/full-content/full-content.component.ts
@@ -32,7 +32,7 @@ const hideTitleCls = `full-content__hidden-title`;
 @Component({
   selector: 'full-content',
   exportAs: 'fullContent',
-  template: ` <ng-content></ng-content> `,
+  template: ` <ng-content /> `,
   host: {
     '[class.full-content]': 'true',
     '[style.height.px]': '_height'
diff --git a/packages/abc/global-footer/global-footer-item.component.ts b/packages/abc/global-footer/global-footer-item.component.ts
index 3ada5495ec..ead0a6e386 100644
--- a/packages/abc/global-footer/global-footer-item.component.ts
+++ b/packages/abc/global-footer/global-footer-item.component.ts
@@ -5,7 +5,7 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 @Component({
   selector: 'global-footer-item',
   exportAs: 'globalFooterItem',
-  template: ` <ng-template #host><ng-content></ng-content></ng-template> `,
+  template: ` <ng-template #host><ng-content /></ng-template> `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
diff --git a/packages/abc/global-footer/global-footer.component.html b/packages/abc/global-footer/global-footer.component.html
index 08de652c4f..b7cd71f70d 100644
--- a/packages/abc/global-footer/global-footer.component.html
+++ b/packages/abc/global-footer/global-footer.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="links.length > 0 || items.length > 0" class="global-footer__links">
   <a *ngFor="let i of links" class="global-footer__links-item" (click)="to(i)" [innerHTML]="i._title"></a>
   <a *ngFor="let i of items" class="global-footer__links-item" (click)="to(i)">
-    <ng-container *ngTemplateOutlet="i.host"></ng-container>
+    <ng-container *ngTemplateOutlet="i.host" />
   </a>
 </div>
 <div class="global-footer__copyright">
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/packages/abc/loading/loading.component.html b/packages/abc/loading/loading.component.html
index 0c7347dc87..10a7170a14 100644
--- a/packages/abc/loading/loading.component.html
+++ b/packages/abc/loading/loading.component.html
@@ -1,6 +1,6 @@
 <div class="loading-default__icon" *ngIf="options.type! !== 'text'">
   <ng-container [ngSwitch]="options.type!">
-    <nz-spin *ngSwitchCase="'spin'" nzSimple></nz-spin>
+    <nz-spin *ngSwitchCase="'spin'" nzSimple />
     <i *ngSwitchCase="'icon'" nz-icon [nzType]="icon.type!" [nzTheme]="icon.theme!" [nzSpin]="icon.spin"></i>
     <div *ngSwitchDefault class="loading-default__custom" [ngStyle]="custom.style!" [innerHTML]="custom.html"></div>
   </ng-container>
diff --git a/packages/abc/media/media.component.ts b/packages/abc/media/media.component.ts
index 715d787a0f..efd84254f4 100644
--- a/packages/abc/media/media.component.ts
+++ b/packages/abc/media/media.component.ts
@@ -31,7 +31,7 @@ export type MediaType = 'html5' | 'youtube' | 'video' | 'audio';
 @Component({
   selector: 'media',
   exportAs: 'mediaComponent',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
   host: {
     '[style.display]': `'block'`
   },
diff --git a/packages/abc/media/media.spec.ts b/packages/abc/media/media.spec.ts
index d25e4316c8..bf4ab07823 100644
--- a/packages/abc/media/media.spec.ts
+++ b/packages/abc/media/media.spec.ts
@@ -102,10 +102,11 @@ describe('abc: media', () => {
   }
 });
 
+// NOTE: <span></span> 当前不管是否有禁用eslint标签都会导致强制自关闭
 @Component({
-  template: `
-    <media #comp [type]="type" [source]="source" [options]="options" [delay]="delay" (ready)="ready()"></media>
-  `
+  template: ` <media #comp [type]="type" [source]="source" [options]="options" [delay]="delay" (ready)="ready()">
+    <span></span>
+  </media>`
 })
 class TestComponent {
   @ViewChild('comp') comp!: MediaComponent;
@@ -116,7 +117,6 @@ class TestComponent {
   ready(): void {}
 }
 @Component({
-  template: `<media #comp [source]="source"><video data-type="custom"></video></media>
-    <media [source]="source"></media>`
+  template: `<media #comp [source]="source"><video data-type="custom"></video></media>`
 })
 class TestCustomVideoComponent extends TestComponent {}
diff --git a/packages/abc/notice-icon/notice-icon-tab.component.html b/packages/abc/notice-icon/notice-icon-tab.component.html
index d49ec99f15..d81f604bdb 100644
--- a/packages/abc/notice-icon/notice-icon-tab.component.html
+++ b/packages/abc/notice-icon/notice-icon-tab.component.html
@@ -12,18 +12,18 @@
       <nz-list-item (click)="onClick(item)" [ngClass]="{ 'notice-icon__item-read': item.read }">
         <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription" [nzAvatar]="item.avatar">
           <ng-template #nzTitle>
-            <ng-container *nzStringTemplateOutlet="item.title; context: { $implicit: item }">{{
-              item.title
-            }}</ng-container>
+            <ng-container *nzStringTemplateOutlet="item.title; context: { $implicit: item }">
+              {{ item.title }}
+            </ng-container>
             <div class="notice-icon__item-extra" *ngIf="item.extra">
               <nz-tag [nzColor]="item.color">{{ item.extra }}</nz-tag>
             </div>
           </ng-template>
           <ng-template #nzDescription>
             <div *ngIf="item.description" class="notice-icon__item-desc">
-              <ng-container *nzStringTemplateOutlet="item.description; context: { $implicit: item }">{{
-                item.description
-              }}</ng-container>
+              <ng-container *nzStringTemplateOutlet="item.description; context: { $implicit: item }">
+                {{ item.description }}
+              </ng-container>
             </div>
             <div *ngIf="item.datetime" class="notice-icon__item-time">{{ item.datetime }}</div>
           </ng-template>
diff --git a/packages/abc/notice-icon/notice-icon.component.html b/packages/abc/notice-icon/notice-icon.component.html
index 2a596a4e25..9a4fa89c07 100644
--- a/packages/abc/notice-icon/notice-icon.component.html
+++ b/packages/abc/notice-icon/notice-icon.component.html
@@ -4,7 +4,7 @@
   </nz-badge>
 </ng-template>
 <div *ngIf="data!.length === 0">
-  <ng-template [ngTemplateOutlet]="badgeTpl"></ng-template>
+  <ng-template [ngTemplateOutlet]="badgeTpl" />
 </div>
 <div
   *ngIf="data!.length > 0"
@@ -16,18 +16,13 @@
   [nzOverlayClassName]="overlayCls"
   [nzDropdownMenu]="noticeMenu"
 >
-  <ng-template [ngTemplateOutlet]="badgeTpl"></ng-template>
+  <ng-template [ngTemplateOutlet]="badgeTpl" />
 </div>
 <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
   <nz-spin [nzSpinning]="loading" [nzDelay]="0">
     <nz-tabset nzSelectedIndex="0" [nzCentered]="centered">
       <nz-tab *ngFor="let i of data" [nzTitle]="i.title">
-        <notice-icon-tab
-          [locale]="locale"
-          [data]="i"
-          (select)="onSelect($event)"
-          (clear)="onClear($event)"
-        ></notice-icon-tab>
+        <notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
       </nz-tab>
     </nz-tabset>
   </nz-spin>
diff --git a/packages/abc/notice-icon/notice-icon.spec.ts b/packages/abc/notice-icon/notice-icon.spec.ts
index b2e99a29e0..2f1d7a2f7c 100644
--- a/packages/abc/notice-icon/notice-icon.spec.ts
+++ b/packages/abc/notice-icon/notice-icon.spec.ts
@@ -137,7 +137,7 @@ describe('abc: notice-icon', () => {
       (clear)="clear($event)"
       [(popoverVisible)]="popoverVisible"
       (popoverVisibleChange)="popupVisibleChange($event)"
-    ></notice-icon>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/abc/page-header/page-header.component.html b/packages/abc/page-header/page-header.component.html
index 52cb9dcb90..81fe8575bd 100644
--- a/packages/abc/page-header/page-header.component.html
+++ b/packages/abc/page-header/page-header.component.html
@@ -1,5 +1,5 @@
 <nz-affix #affix *ngIf="isBrowser && fixed; else phTpl" [nzOffsetTop]="fixedOffsetTop">
-  <ng-template [ngTemplateOutlet]="phTpl"></ng-template>
+  <ng-template [ngTemplateOutlet]="phTpl" />
 </nz-affix>
 <ng-template #phTpl>
   <div class="page-header" [class.page-header-rtl]="dir === 'rtl'">
@@ -24,7 +24,7 @@
         </ng-container>
         <div class="page-header__detail">
           <div *ngIf="logo" class="page-header__logo">
-            <ng-template [ngTemplateOutlet]="logo"></ng-template>
+            <ng-template [ngTemplateOutlet]="logo" />
           </div>
           <div class="page-header__main">
             <div class="page-header__row">
@@ -32,21 +32,21 @@ <h1 *ngIf="_titleVal || _titleTpl" class="page-header__title">
                 <ng-container *ngIf="_titleVal; else _titleTpl">{{ _titleVal }}</ng-container>
               </h1>
               <div *ngIf="action" class="page-header__action">
-                <ng-template [ngTemplateOutlet]="action"></ng-template>
+                <ng-template [ngTemplateOutlet]="action" />
               </div>
             </div>
             <div class="page-header__row">
               <div class="page-header__desc" (cdkObserveContent)="checkContent()" #conTpl>
-                <ng-content></ng-content>
-                <ng-template [ngTemplateOutlet]="content!"></ng-template>
+                <ng-content />
+                <ng-template [ngTemplateOutlet]="content!" />
               </div>
               <div *ngIf="extra" class="page-header__extra">
-                <ng-template [ngTemplateOutlet]="extra"></ng-template>
+                <ng-template [ngTemplateOutlet]="extra" />
               </div>
             </div>
           </div>
         </div>
-        <ng-template [ngTemplateOutlet]="tab!"></ng-template>
+        <ng-template [ngTemplateOutlet]="tab!" />
       </nz-skeleton>
     </div>
   </div>
diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts
index 1a9c9449b1..3dc964338a 100644
--- a/packages/abc/page-header/page-header.spec.ts
+++ b/packages/abc/page-header/page-header.spec.ts
@@ -463,13 +463,7 @@ class TestComponent extends TestBaseComponent {}
 
 @Component({
   template: `
-    <page-header
-      #comp
-      [title]="title"
-      [home]="home"
-      [homeI18n]="homeI18n"
-      [autoBreadcrumb]="autoBreadcrumb"
-    ></page-header>
+    <page-header #comp [title]="title" [home]="home" [homeI18n]="homeI18n" [autoBreadcrumb]="autoBreadcrumb" />
   `
 })
 class TestAutoBreadcrumbComponent extends TestBaseComponent {}
@@ -483,7 +477,7 @@ class TestAutoBreadcrumbComponent extends TestBaseComponent {}
       [homeI18n]="homeI18n"
       [homeLink]="homeLink"
       [autoBreadcrumb]="autoBreadcrumb"
-    ></page-header>
+    />
   `
 })
 class TestI18nComponent extends TestBaseComponent {}
diff --git a/packages/abc/pdf/pdf.component.ts b/packages/abc/pdf/pdf.component.ts
index 6a7ea91ba5..be89dc1bb2 100644
--- a/packages/abc/pdf/pdf.component.ts
+++ b/packages/abc/pdf/pdf.component.ts
@@ -43,7 +43,7 @@ const BORDER_WIDTH = 9;
   selector: 'pdf',
   exportAs: 'pdf',
   template: `
-    <nz-skeleton *ngIf="!inited || loading"></nz-skeleton>
+    <nz-skeleton *ngIf="!inited || loading" />
     <div class="pdf-container">
       <div class="pdfViewer"></div>
     </div>
diff --git a/packages/abc/pdf/pdf.spec.ts b/packages/abc/pdf/pdf.spec.ts
index db5f4e6913..dde97b4ca1 100644
--- a/packages/abc/pdf/pdf.spec.ts
+++ b/packages/abc/pdf/pdf.spec.ts
@@ -44,7 +44,7 @@ describe('abc: pdf', () => {
 });
 
 @Component({
-  template: ` <pdf #comp [src]="src" [options]="options" [delay]="delay" (change)="change()"></pdf> `
+  template: ` <pdf #comp [src]="src" [options]="options" [delay]="delay" (change)="change()" /> `
 })
 class TestComponent {
   @ViewChild('comp') comp!: PdfComponent;
diff --git a/packages/abc/qr/qr.spec.ts b/packages/abc/qr/qr.spec.ts
index 154ffcdfd4..b475a01882 100644
--- a/packages/abc/qr/qr.spec.ts
+++ b/packages/abc/qr/qr.spec.ts
@@ -104,7 +104,7 @@ describe('abc: qr', () => {
       [padding]="padding"
       [size]="size"
       (change)="change($event)"
-    ></qr>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/abc/quick-menu/quick-menu.component.html b/packages/abc/quick-menu/quick-menu.component.html
index e2a323d5d9..e3342dbca6 100644
--- a/packages/abc/quick-menu/quick-menu.component.html
+++ b/packages/abc/quick-menu/quick-menu.component.html
@@ -6,5 +6,5 @@
       </ng-container>
     </div>
   </div>
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/packages/abc/quick-menu/quick-menu.spec.ts b/packages/abc/quick-menu/quick-menu.spec.ts
index c978a149fd..9389d1cb41 100644
--- a/packages/abc/quick-menu/quick-menu.spec.ts
+++ b/packages/abc/quick-menu/quick-menu.spec.ts
@@ -81,7 +81,7 @@ describe('abc: quick-menu', () => {
       [borderColor]="borderColor"
       [expand]="expand"
       (expandChange)="expandChange()"
-    ></quick-menu>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/abc/result/result.component.html b/packages/abc/result/result.component.html
index e5a1aa659b..1902b77f1d 100644
--- a/packages/abc/result/result.component.html
+++ b/packages/abc/result/result.component.html
@@ -11,5 +11,5 @@
   <ng-container *nzStringTemplateOutlet="extra">{{ extra }}</ng-container>
 </div>
 <div class="result__actions">
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/packages/abc/result/result.spec.ts b/packages/abc/result/result.spec.ts
index 475349fe41..b3ea230b87 100644
--- a/packages/abc/result/result.spec.ts
+++ b/packages/abc/result/result.spec.ts
@@ -104,7 +104,7 @@ describe('abc: result', () => {
 
 @Component({
   template: `
-    <result #comp [type]="type" [title]="title" [description]="description" [extra]="extra"></result>
+    <result #comp [type]="type" [title]="title" [description]="description" [extra]="extra" />
     <ng-template #titleTpl><p id="titleTpl">titleTpl</p></ng-template>
     <ng-template #descriptionTpl><p id="descriptionTpl">descriptionTpl</p></ng-template>
     <ng-template #extraTpl><p id="extraTpl">extraTpl</p></ng-template>
diff --git a/packages/abc/reuse-tab/reuse-tab.component.html b/packages/abc/reuse-tab/reuse-tab.component.html
index 6266a891f2..8027db9e87 100644
--- a/packages/abc/reuse-tab/reuse-tab.component.html
+++ b/packages/abc/reuse-tab/reuse-tab.component.html
@@ -20,7 +20,7 @@
             *ngIf="titleRender; else defaultTitle"
             [ngTemplateOutlet]="titleRender"
             [ngTemplateOutletContext]="{ $implicit: i }"
-          ></ng-container>
+          />
           <ng-template #defaultTitle>{{ i.title }}</ng-template>
         </span>
       </div>
@@ -28,4 +28,4 @@
     </ng-template>
   </nz-tab>
 </nz-tabset>
-<reuse-tab-context [i18n]="i18n" (change)="contextMenuChange($event)"></reuse-tab-context>
+<reuse-tab-context [i18n]="i18n" (change)="contextMenuChange($event)" />
diff --git a/packages/abc/reuse-tab/reuse-tab.component.spec.ts b/packages/abc/reuse-tab/reuse-tab.component.spec.ts
index 0210d123dc..0ba445f44d 100644
--- a/packages/abc/reuse-tab/reuse-tab.component.spec.ts
+++ b/packages/abc/reuse-tab/reuse-tab.component.spec.ts
@@ -839,7 +839,7 @@ describe('abc: reuse-tab', () => {
     <a id="d" [routerLink]="['/d']">d</a>
     <a id="e" [routerLink]="['/e']">e</a>
     <a id="leave" [routerLink]="['/leave']">leave</a>
-    <router-outlet></router-outlet>
+    <router-outlet />
   `
 })
 class AppComponent {}
@@ -866,9 +866,8 @@ class AppComponent {}
       [canClose]="canClose"
       (change)="change($event)"
       (close)="close($event)"
-    >
-    </reuse-tab>
-    <div id="children"><router-outlet></router-outlet></div>
+    />
+    <div id="children"><router-outlet /></div>
     <ng-template #titleRender let-i>{{ i.url }}</ng-template>
   `
 })
diff --git a/packages/abc/se/se-container.component.ts b/packages/abc/se/se-container.component.ts
index 39b7e5985c..82b5f7c32c 100644
--- a/packages/abc/se/se-container.component.ts
+++ b/packages/abc/se/se-container.component.ts
@@ -26,7 +26,7 @@ import { SEErrorRefresh, SELayout } from './se.types';
     <div se-title *ngIf="title">
       <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
     </div>
-    <ng-content></ng-content>
+    <ng-content />
   `,
   host: {
     '[class.ant-row]': `true`,
@@ -119,7 +119,7 @@ export class SEContainerComponent {
 @Component({
   selector: 'se-title, [se-title]',
   exportAs: 'seTitle',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   host: {
     '[class.se__title]': 'true'
   },
diff --git a/packages/abc/se/se.component.html b/packages/abc/se/se.component.html
index 1bb83ebedf..78aa42f63b 100644
--- a/packages/abc/se/se.component.html
+++ b/packages/abc/se/se.component.html
@@ -24,7 +24,7 @@
 <div class="ant-form-item-control se__control">
   <div class="ant-form-item-control-input {{ controlClass }}">
     <div class="ant-form-item-control-input-content" (cdkObserveContent)="checkContent()" #contentElement>
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   </div>
   <div @helpMotion class="ant-form-item-explain ant-form-item-explain-connected" *ngIf="showErr">
diff --git a/packages/abc/sg/sg-container.component.ts b/packages/abc/sg/sg-container.component.ts
index ae260975ed..2227f6e378 100644
--- a/packages/abc/sg/sg-container.component.ts
+++ b/packages/abc/sg/sg-container.component.ts
@@ -7,7 +7,7 @@ import { InputNumber, NumberInput } from '@delon/util/decorator';
 @Component({
   selector: 'sg-container, [sg-container]',
   exportAs: 'sgContainer',
-  template: ` <ng-content></ng-content> `,
+  template: ` <ng-content /> `,
   host: {
     '[style.margin-left.px]': 'marginValue',
     '[style.margin-right.px]': 'marginValue',
diff --git a/packages/abc/sg/sg.component.ts b/packages/abc/sg/sg.component.ts
index abdf6e5619..d4dd6ad593 100644
--- a/packages/abc/sg/sg.component.ts
+++ b/packages/abc/sg/sg.component.ts
@@ -21,7 +21,7 @@ const prefixCls = `sg`;
 @Component({
   selector: 'sg',
   exportAs: 'sg',
-  template: ` <ng-content></ng-content> `,
+  template: ` <ng-content /> `,
   host: {
     '[style.padding-left.px]': 'paddingValue',
     '[style.padding-right.px]': 'paddingValue'
diff --git a/packages/abc/sg/sg.spec.ts b/packages/abc/sg/sg.spec.ts
index 40857002dc..a1a0221459 100644
--- a/packages/abc/sg/sg.spec.ts
+++ b/packages/abc/sg/sg.spec.ts
@@ -128,7 +128,7 @@ describe('abc: sg', () => {
 @Component({
   template: `
     <div [sg-container]="parent_colInCon" #sgComp="sgContainer" [col]="parent_col" [gutter]="parent_gutter">
-      <sg #viewComp [col]="col"></sg>
+      <sg #viewComp [col]="col" />
     </div>
   `
 })
diff --git a/packages/abc/st/st-filter.component.ts b/packages/abc/st/st-filter.component.ts
index de0d648b58..98056d69e0 100644
--- a/packages/abc/st/st-filter.component.ts
+++ b/packages/abc/st/st-filter.component.ts
@@ -52,7 +52,7 @@ import { _STColumn } from './st.types';
               [nzPrecision]="f.number!.precision"
               [nzPlaceHolder]="f.placeholder!"
               class="width-100"
-            ></nz-input-number>
+            />
           </div>
           <div *ngSwitchCase="'date'" class="p-sm st__filter-date">
             <nz-date-picker
@@ -65,7 +65,7 @@ import { _STColumn } from './st.types';
               [nzShowToday]="f.date!.showToday"
               [nzDisabledDate]="f.date!.disabledDate"
               [nzDisabledTime]="f.date!.disabledTime"
-            ></nz-date-picker>
+            />
             <nz-range-picker
               *ngIf="f.date!.range"
               nzInline
@@ -76,14 +76,14 @@ import { _STColumn } from './st.types';
               [nzShowToday]="f.date!.showToday"
               [nzDisabledDate]="f.date!.disabledDate"
               [nzDisabledTime]="f.date!.disabledTime"
-            ></nz-range-picker>
+            />
           </div>
           <div *ngSwitchCase="'time'" class="p-sm st__filter-time"> </div>
           <div *ngSwitchCase="'custom'" class="st__filter-custom">
             <ng-template
               [ngTemplateOutlet]="f.custom!"
               [ngTemplateOutletContext]="{ $implicit: f, col: col, handle: this }"
-            ></ng-template>
+            />
           </div>
           <ul *ngSwitchDefault nz-menu>
             <ng-container *ngIf="f.multiple">
diff --git a/packages/abc/st/st-td.component.html b/packages/abc/st/st-td.component.html
index 5ba9dcbfb1..fd2d98af14 100644
--- a/packages/abc/st/st-td.component.html
+++ b/packages/abc/st/st-td.component.html
@@ -21,10 +21,10 @@
     [ngClass]="i._className"
     (click)="_stopPropagation($event)"
   >
-    <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+    <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }" />
   </a>
   <a *ngIf="!i.pop" (click)="_btn(i, $event)" class="st__btn-text" [ngClass]="i._className">
-    <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+    <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }" />
   </a>
 </ng-template>
 <ng-template #btnTextTpl let-i>
@@ -72,10 +72,10 @@
       <nz-tag *ngSwitchCase="'tag'" [nzColor]="i._values[cIdx].color">
         <span [innerHTML]="i._values[cIdx]._text"></span>
       </nz-tag>
-      <nz-badge *ngSwitchCase="'badge'" [nzStatus]="i._values[cIdx].color" [nzText]="i._values[cIdx].text"></nz-badge>
+      <nz-badge *ngSwitchCase="'badge'" [nzStatus]="i._values[cIdx].color" [nzText]="i._values[cIdx].text" />
     </ng-container>
-    <ng-template *ngSwitchCase="'widget'" st-widget-host [record]="i" [column]="c"></ng-template
-    ><ng-container *ngSwitchDefault>
+    <ng-template *ngSwitchCase="'widget'" st-widget-host [record]="i" [column]="c" />
+    <ng-container *ngSwitchDefault>
       <span
         *ngIf="c.safeType !== 'text'"
         [innerHTML]="i._values[cIdx]._text"
@@ -97,17 +97,15 @@
       <ul nz-menu>
         <ng-container *ngFor="let subBtn of btn.children!">
           <li *ngIf="subBtn.type !== 'divider'" nz-menu-item [class.st__btn-disabled]="subBtn._disabled">
-            <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: subBtn, child: true }">
-            </ng-template>
+            <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: subBtn, child: true }" />
           </li>
           <li *ngIf="subBtn.type === 'divider'" nz-menu-divider></li>
         </ng-container>
       </ul>
     </nz-dropdown-menu>
     <span *ngIf="btn.children!.length === 0" [class.st__btn-disabled]="btn._disabled">
-      <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: btn, child: false }">
-      </ng-template>
+      <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: btn, child: false }" />
     </span>
-    <nz-divider *ngIf="!last" nzType="vertical"></nz-divider>
+    <nz-divider *ngIf="!last" nzType="vertical" />
   </ng-container>
 </ng-container>
diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
index 20993b762f..0d4584e02a 100644
--- a/packages/abc/st/st.component.html
+++ b/packages/abc/st/st.component.html
@@ -90,17 +90,15 @@
             #renderTitle
             [ngTemplateOutlet]="_c.__renderTitle!"
             [ngTemplateOutletContext]="{ $implicit: h.column, index: index }"
-          ></ng-template>
+          />
           <ng-container *ngIf="!_c.__renderTitle; else renderTitle">
             <ng-container [ngSwitch]="_c.type">
               <ng-container *ngSwitchCase="'checkbox'">
                 <ng-container *ngIf="_c.selections!.length === 0">
-                  <ng-template [ngTemplateOutlet]="chkAllTpl" [ngTemplateOutletContext]="{ $implicit: false }">
-                  </ng-template>
+                  <ng-template [ngTemplateOutlet]="chkAllTpl" [ngTemplateOutletContext]="{ $implicit: false }" />
                 </ng-container>
                 <div *ngIf="_c.selections!.length > 0" class="ant-table-selection">
-                  <ng-template [ngTemplateOutlet]="chkAllTpl" [ngTemplateOutletContext]="{ $implicit: true }">
-                  </ng-template>
+                  <ng-template [ngTemplateOutlet]="chkAllTpl" [ngTemplateOutletContext]="{ $implicit: true }" />
                   <div *ngIf="_c.selections!.length" class="ant-table-selection-extra">
                     <div
                       nz-dropdown
@@ -124,10 +122,7 @@
                 </div>
               </ng-container>
               <ng-container *ngSwitchDefault>
-                <ng-template
-                  [ngTemplateOutlet]="titleTpl"
-                  [ngTemplateOutletContext]="{ $implicit: _c.title }"
-                ></ng-template>
+                <ng-template [ngTemplateOutlet]="titleTpl" [ngTemplateOutletContext]="{ $implicit: _c.title }" />
               </ng-container>
             </ng-container>
           </ng-container>
@@ -139,7 +134,7 @@
               [locale]="locale"
               (n)="handleFilterNotify($event)"
               (handle)="_handleFilter(_c, $event)"
-            ></st-filter>
+            />
           </ng-container>
         </th>
       </ng-container>
@@ -147,10 +142,7 @@
   </thead>
   <tbody class="st__body">
     <ng-container *ngIf="!_loading">
-      <ng-template
-        [ngTemplateOutlet]="bodyHeader!"
-        [ngTemplateOutletContext]="{ $implicit: _statistical }"
-      ></ng-template>
+      <ng-template [ngTemplateOutlet]="bodyHeader!" [ngTemplateOutletContext]="{ $implicit: _statistical }" />
     </ng-container>
     <ng-template #bodyTpl let-i let-index="index">
       <tr
@@ -178,36 +170,28 @@
             [attr.rowspan]="i._values[cIdx].props?.rowSpan === 1 ? null : i._values[cIdx].props?.rowSpan"
           >
             <span *ngIf="responsive" class="ant-table-rep__title">
-              <ng-template
-                [ngTemplateOutlet]="titleTpl"
-                [ngTemplateOutletContext]="{ $implicit: c.title }"
-              ></ng-template>
+              <ng-template [ngTemplateOutlet]="titleTpl" [ngTemplateOutletContext]="{ $implicit: c.title }" />
             </span>
-            <st-td [data]="_data" [i]="i" [index]="index" [c]="c" [cIdx]="cIdx" (n)="_handleTd($event)"></st-td>
+            <st-td [data]="_data" [i]="i" [index]="index" [c]="c" [cIdx]="cIdx" (n)="_handleTd($event)" />
           </td>
         </ng-container>
       </tr>
       <tr [nzExpand]="i.expand">
-        <ng-template
-          [ngTemplateOutlet]="expand"
-          [ngTemplateOutletContext]="{ $implicit: i, index: index }"
-        ></ng-template>
+        <ng-template [ngTemplateOutlet]="expand" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
       </tr>
     </ng-template>
     <ng-container *ngIf="!virtualScroll">
       <ng-container *ngFor="let i of _data; let index = index">
-        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{ $implicit: i, index: index }">
-        </ng-template>
+        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
       </ng-container>
     </ng-container>
     <ng-container *ngIf="virtualScroll">
       <ng-template nz-virtual-scroll let-i let-index="index">
-        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{ $implicit: i, index: index }">
-        </ng-template>
+        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
       </ng-template>
     </ng-container>
     <ng-container *ngIf="!_loading">
-      <ng-template [ngTemplateOutlet]="body!" [ngTemplateOutletContext]="{ $implicit: _statistical }"></ng-template>
+      <ng-template [ngTemplateOutlet]="body!" [ngTemplateOutletContext]="{ $implicit: _statistical }" />
     </ng-container>
   </tbody>
   <ng-template #totalTpl let-range="range" let-total>{{ renderTotal(total, range) }}</ng-template>
diff --git a/packages/abc/st/test/base.spec.ts b/packages/abc/st/test/base.spec.ts
index d53de457bb..b43d9770d9 100644
--- a/packages/abc/st/test/base.spec.ts
+++ b/packages/abc/st/test/base.spec.ts
@@ -420,8 +420,7 @@ export class PageObject<T extends TestComponent> {
       [customRequest]="customRequest"
       (change)="change($event)"
       (error)="error()"
-    >
-    </st>
+    />
     <ng-template #tpl let-handle="handle">
       <span>In tpl</span>
       <a class="close_in_tpl" (click)="handle.close()">close</a>
diff --git a/packages/abc/sv/sv-container.component.ts b/packages/abc/sv/sv-container.component.ts
index 90f508973d..ca1f63bf7b 100644
--- a/packages/abc/sv/sv-container.component.ts
+++ b/packages/abc/sv/sv-container.component.ts
@@ -22,7 +22,7 @@ import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/uti
       <sv-title *ngIf="title">
         <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
       </sv-title>
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   `,
   host: {
@@ -71,7 +71,7 @@ export class SVContainerComponent {
 @Component({
   selector: 'sv-title, [sv-title]',
   exportAs: 'svTitle',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   host: {
     '[class.sv__title]': 'true'
   },
diff --git a/packages/abc/sv/sv-value.component.ts b/packages/abc/sv/sv-value.component.ts
index e9ca9584b2..22c7f17e5b 100644
--- a/packages/abc/sv/sv-value.component.ts
+++ b/packages/abc/sv/sv-value.component.ts
@@ -7,7 +7,7 @@ import type { NzTSType } from 'ng-zorro-antd/core/types';
   exportAs: 'svValue',
   template: `
     <em *ngIf="prefix" class="sv__value-prefix" [innerHTML]="prefix"></em>
-    <span nz-tooltip [nzTooltipTitle]="tooltip" class="sv__value-text"><ng-content></ng-content></span>
+    <span nz-tooltip [nzTooltipTitle]="tooltip" class="sv__value-text"><ng-content /></span>
     <em *ngIf="unit" class="sv__value-unit" [innerHTML]="unit"></em>
   `,
   host: {
diff --git a/packages/abc/sv/sv.component.html b/packages/abc/sv/sv.component.html
index 5e4d6924c1..a0b863fde0 100644
--- a/packages/abc/sv/sv.component.html
+++ b/packages/abc/sv/sv.component.html
@@ -23,7 +23,7 @@
 </div>
 <div class="sv__detail">
   <span (cdkObserveContent)="checkContent()" #conEl>
-    <ng-content></ng-content>
+    <ng-content />
   </span>
   <ng-container *ngIf="!!unit">
     <span class="sv__unit" *nzStringTemplateOutlet="unit">{{ unit }}</span>
diff --git a/packages/abc/tag-select/tag-select.component.html b/packages/abc/tag-select/tag-select.component.html
index ce9ef7b191..ded8d1613f 100644
--- a/packages/abc/tag-select/tag-select.component.html
+++ b/packages/abc/tag-select/tag-select.component.html
@@ -1,4 +1,4 @@
-<ng-content></ng-content>
+<ng-content />
 <a *ngIf="expandable" class="ant-tag ant-tag-checkable tag-select__trigger" (click)="trigger()">
   {{ expand ? locale.collapse : locale.expand }}
   <i nz-icon nzType="down" [style.transform]="expand ? 'rotate(-180deg)' : null"></i>
diff --git a/packages/chart/bar/bar.component.ts b/packages/chart/bar/bar.component.ts
index a2f0ef6c22..c7e2481c18 100644
--- a/packages/chart/bar/bar.component.ts
+++ b/packages/chart/bar/bar.component.ts
@@ -36,7 +36,7 @@ export interface G2BarClickItem {
     <ng-container *nzStringTemplateOutlet="title">
       <h4 style="margin-bottom: 20px;">{{ title }}</h4>
     </ng-container>
-    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <nz-skeleton *ngIf="!loaded" />
     <div #container></div>
   `,
   host: {
diff --git a/packages/chart/bar/bar.spec.ts b/packages/chart/bar/bar.spec.ts
index 64d3000b09..f716760b77 100644
--- a/packages/chart/bar/bar.spec.ts
+++ b/packages/chart/bar/bar.spec.ts
@@ -82,7 +82,7 @@ describe('chart: bar', () => {
       [data]="data"
       [autoLabel]="autoLabel"
       (clickItem)="clickItem($event)"
-    ></g2-bar>
+    />
     <ng-template #titleTpl><p id="titleTpl">titleTpl</p></ng-template>
   `
 })
diff --git a/packages/chart/card/card.component.html b/packages/chart/card/card.component.html
index e10fb07c89..446c8a4173 100644
--- a/packages/chart/card/card.component.html
+++ b/packages/chart/card/card.component.html
@@ -18,7 +18,7 @@
     </div>
     <div class="g2-card__desc" [ngStyle]="{ height: _height }">
       <div [ngClass]="{ 'g2-card__fixed': !!_orgHeight }">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
     <div class="g2-card__footer" *ngIf="footer">
diff --git a/packages/chart/card/card.spec.ts b/packages/chart/card/card.spec.ts
index 61cfb7f618..a6ad653e41 100644
--- a/packages/chart/card/card.spec.ts
+++ b/packages/chart/card/card.spec.ts
@@ -40,8 +40,7 @@ describe('chart: card', () => {
       [total]="126560"
       footer="日访问量 12,423"
       [contentHeight]="contentHeight"
-    >
-    </g2-card>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/chart-echarts/echarts.component.ts b/packages/chart/chart-echarts/echarts.component.ts
index ad3de62040..eaad848828 100644
--- a/packages/chart/chart-echarts/echarts.component.ts
+++ b/packages/chart/chart-echarts/echarts.component.ts
@@ -34,7 +34,7 @@ import {
   selector: 'chart-echarts, [chart-echarts]',
   exportAs: 'chartECharts',
   template: `
-    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <nz-skeleton *ngIf="!loaded" />
     <div #container [style.width]="_width" [style.height]="_height"></div>
   `,
   host: {
diff --git a/packages/chart/chart-echarts/echarts.spec.ts b/packages/chart/chart-echarts/echarts.spec.ts
index 5ba7eeeb12..0f7371fa24 100644
--- a/packages/chart/chart-echarts/echarts.spec.ts
+++ b/packages/chart/chart-echarts/echarts.spec.ts
@@ -97,7 +97,7 @@ describe('chart: chart-echarts', () => {
       [initOpt]="initOpt"
       [on]="on"
       (events)="handleEvents($event)"
-    ></chart-echarts>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/custom/custom.component.ts b/packages/chart/custom/custom.component.ts
index f072d677e1..99345d131f 100644
--- a/packages/chart/custom/custom.component.ts
+++ b/packages/chart/custom/custom.component.ts
@@ -16,7 +16,7 @@ import { InputNumber, NumberInput } from '@delon/util/decorator';
   selector: 'g2,g2-custom',
   exportAs: 'g2Custom',
   template: `
-    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <nz-skeleton *ngIf="!loaded" />
     <ng-content></ng-content>
   `,
   host: {
diff --git a/packages/chart/custom/custom.spec.ts b/packages/chart/custom/custom.spec.ts
index b105ba357d..a09a3e0017 100644
--- a/packages/chart/custom/custom.spec.ts
+++ b/packages/chart/custom/custom.spec.ts
@@ -51,7 +51,7 @@ describe('chart: custom', () => {
 });
 
 @Component({
-  template: ` <g2-custom #comp [resizeTime]="resizeTime" (resize)="resize()" (render)="render()"></g2-custom> `
+  template: ` <g2-custom #comp [resizeTime]="resizeTime" (resize)="resize()" (render)="render()" />`
 })
 class TestComponent {
   @ViewChild('comp', { static: true }) comp!: G2CustomComponent;
diff --git a/packages/chart/gauge/gauge.component.ts b/packages/chart/gauge/gauge.component.ts
index e99e89e3db..f348cc98be 100644
--- a/packages/chart/gauge/gauge.component.ts
+++ b/packages/chart/gauge/gauge.component.ts
@@ -9,7 +9,7 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 @Component({
   selector: 'g2-gauge',
   exportAs: 'g2Gauge',
-  template: `<nz-skeleton *ngIf="!loaded"></nz-skeleton>`,
+  template: `<nz-skeleton *ngIf="!loaded" />`,
   host: {
     '[class.g2-gauge]': 'true'
   },
diff --git a/packages/chart/gauge/gauge.spec.ts b/packages/chart/gauge/gauge.spec.ts
index 9f7f8ebc79..3bf7cfdb48 100644
--- a/packages/chart/gauge/gauge.spec.ts
+++ b/packages/chart/gauge/gauge.spec.ts
@@ -26,7 +26,7 @@ describe('chart: gauge', () => {
 });
 
 @Component({
-  template: ` <g2-gauge #comp [title]="'核销率'" height="164" [percent]="percent" [delay]="delay"></g2-gauge> `
+  template: ` <g2-gauge #comp [title]="'核销率'" height="164" [percent]="percent" [delay]="delay" />`
 })
 class TestComponent {
   @ViewChild('comp', { static: true }) comp!: G2GaugeComponent;
diff --git a/packages/chart/mini-area/mini-area.spec.ts b/packages/chart/mini-area/mini-area.spec.ts
index 6038bf2ebb..70660d807f 100644
--- a/packages/chart/mini-area/mini-area.spec.ts
+++ b/packages/chart/mini-area/mini-area.spec.ts
@@ -93,7 +93,7 @@ describe('chart: mini-area', () => {
       [tooltipType]="tooltipType"
       [xAxis]="xAxis"
       [yAxis]="yAxis"
-    ></g2-mini-area>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/mini-bar/mini-bar.spec.ts b/packages/chart/mini-bar/mini-bar.spec.ts
index e315d24ae3..d323089922 100644
--- a/packages/chart/mini-bar/mini-bar.spec.ts
+++ b/packages/chart/mini-bar/mini-bar.spec.ts
@@ -56,7 +56,7 @@ describe('chart: mini-bar', () => {
       [tooltipType]="tooltipType"
       [data]="data"
       [delay]="delay"
-    ></g2-mini-bar>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/mini-progress/mini-progress.spec.ts b/packages/chart/mini-progress/mini-progress.spec.ts
index 48773995d4..4d380d8717 100644
--- a/packages/chart/mini-progress/mini-progress.spec.ts
+++ b/packages/chart/mini-progress/mini-progress.spec.ts
@@ -44,8 +44,7 @@ describe('chart: mini-progress', () => {
 
 @Component({
   template: `
-    <g2-mini-progress #comp [color]="color" [target]="target" [percent]="percent" [strokeWidth]="strokeWidth">
-    </g2-mini-progress>
+    <g2-mini-progress #comp [color]="color" [target]="target" [percent]="percent" [strokeWidth]="strokeWidth" />
   `
 })
 class TestComponent {
diff --git a/packages/chart/number-info/number-info.spec.ts b/packages/chart/number-info/number-info.spec.ts
index cf7ff15565..7ce58efd96 100644
--- a/packages/chart/number-info/number-info.spec.ts
+++ b/packages/chart/number-info/number-info.spec.ts
@@ -105,7 +105,7 @@ describe('abc: number-info', () => {
       [status]="status"
       [theme]="theme"
       [gap]="gap"
-    ></number-info>
+    />
     <ng-template #titleTpl><p id="titleTpl">titleTpl</p></ng-template>
     <ng-template #subTitleTpl><p id="subTitleTpl">subTitleTpl</p></ng-template>
     <ng-template #totalTpl><p id="totalTpl">totalTpl</p></ng-template>
diff --git a/packages/chart/pie/pie.component.html b/packages/chart/pie/pie.component.html
index 3a58b1c806..b877d452d7 100644
--- a/packages/chart/pie/pie.component.html
+++ b/packages/chart/pie/pie.component.html
@@ -1,4 +1,4 @@
-<nz-skeleton *ngIf="!loaded"></nz-skeleton>
+<nz-skeleton *ngIf="!loaded" />
 <div class="g2-pie__chart">
   <div #container></div>
   <div *ngIf="subTitle || total" class="g2-pie__total">
@@ -18,7 +18,7 @@ <h4 *ngIf="subTitle" class="g2-pie__total-title">
   <li *ngFor="let item of legendData; let index = index" (click)="_click(index)" class="g2-pie__legend-item">
     <span class="g2-pie__legend-dot" [ngStyle]="{ 'background-color': !item.checked ? '#aaa' : item.color }"></span>
     <span class="g2-pie__legend-title">{{ item.x }}</span>
-    <nz-divider nzType="vertical"></nz-divider>
+    <nz-divider nzType="vertical" />
     <span class="g2-pie__legend-percent">{{ item.percent }}%</span>
     <span class="g2-pie__legend-value" [innerHTML]="valueFormat ? valueFormat(item.y) : item.y"></span>
   </li>
diff --git a/packages/chart/pie/pie.spec.ts b/packages/chart/pie/pie.spec.ts
index 7e8c1c8a9f..c9970f76ee 100644
--- a/packages/chart/pie/pie.spec.ts
+++ b/packages/chart/pie/pie.spec.ts
@@ -98,7 +98,7 @@ describe('chart: pie', () => {
       [lineWidth]="lineWidth"
       [select]="select"
       [colors]="colors"
-    ></g2-pie>
+    />
   `
 })
 class TestMiniComponent {
@@ -136,7 +136,7 @@ class TestMiniComponent {
       [select]="select"
       [colors]="colors"
       [delay]="delay"
-    ></g2-pie>
+    />
   `
 })
 class TestFullComponent {
diff --git a/packages/chart/radar/radar.component.html b/packages/chart/radar/radar.component.html
index c8f9f19010..492c5d8db8 100644
--- a/packages/chart/radar/radar.component.html
+++ b/packages/chart/radar/radar.component.html
@@ -1,4 +1,4 @@
-<nz-skeleton *ngIf="!loaded"></nz-skeleton>
+<nz-skeleton *ngIf="!loaded" />
 <ng-container *nzStringTemplateOutlet="title">
   <h4>{{ title }}</h4>
 </ng-container>
diff --git a/packages/chart/radar/radar.spec.ts b/packages/chart/radar/radar.spec.ts
index a74ae982d7..b755b215ed 100644
--- a/packages/chart/radar/radar.spec.ts
+++ b/packages/chart/radar/radar.spec.ts
@@ -34,8 +34,7 @@ describe('chart: radar', () => {
 
 @Component({
   template: `
-    <g2-radar #comp [hasLegend]="hasLegend" [title]="title" [tickCount]="tickCount" [data]="data" [delay]="delay">
-    </g2-radar>
+    <g2-radar #comp [hasLegend]="hasLegend" [title]="title" [tickCount]="tickCount" [data]="data" [delay]="delay" />
   `
 })
 class TestComponent {
diff --git a/packages/chart/single-bar/single-bar.spec.ts b/packages/chart/single-bar/single-bar.spec.ts
index 33b0e33faf..c401a53ef8 100644
--- a/packages/chart/single-bar/single-bar.spec.ts
+++ b/packages/chart/single-bar/single-bar.spec.ts
@@ -48,7 +48,7 @@ describe('chart: single-bar', () => {
       [padding]="padding"
       [textStyle]="textStyle"
       [delay]="delay"
-    ></g2-single-bar>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/tag-cloud/tag-cloud.component.ts b/packages/chart/tag-cloud/tag-cloud.component.ts
index c9052d4bd7..b7af6ef99d 100644
--- a/packages/chart/tag-cloud/tag-cloud.component.ts
+++ b/packages/chart/tag-cloud/tag-cloud.component.ts
@@ -21,7 +21,7 @@ export interface G2TagCloudClickItem {
 @Component({
   selector: 'g2-tag-cloud',
   exportAs: 'g2TagCloud',
-  template: `<nz-skeleton *ngIf="!loaded"></nz-skeleton>`,
+  template: `<nz-skeleton *ngIf="!loaded" />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
diff --git a/packages/chart/tag-cloud/tag-cloud.spec.ts b/packages/chart/tag-cloud/tag-cloud.spec.ts
index cb242b35ad..26fd33a840 100644
--- a/packages/chart/tag-cloud/tag-cloud.spec.ts
+++ b/packages/chart/tag-cloud/tag-cloud.spec.ts
@@ -40,7 +40,7 @@ describe('chart: tag-cloud', () => {
 });
 
 @Component({
-  template: ` <g2-tag-cloud #comp height="200" width="200" [data]="data" [delay]="delay"></g2-tag-cloud> `
+  template: ` <g2-tag-cloud #comp height="200" width="200" [data]="data" [delay]="delay" />`
 })
 class TestComponent {
   @ViewChild('comp', { static: true }) comp!: G2TagCloudComponent;
diff --git a/packages/chart/timeline/timeline.component.ts b/packages/chart/timeline/timeline.component.ts
index 3c2cf27bb0..ca255af377 100644
--- a/packages/chart/timeline/timeline.component.ts
+++ b/packages/chart/timeline/timeline.component.ts
@@ -67,7 +67,7 @@ export interface G2TimelineClickItem {
     <ng-container *nzStringTemplateOutlet="title">
       <h4>{{ title }}</h4>
     </ng-container>
-    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <nz-skeleton *ngIf="!loaded" />
     <div #container></div>
   `,
   preserveWhitespaces: false,
diff --git a/packages/chart/timeline/timeline.spec.ts b/packages/chart/timeline/timeline.spec.ts
index e07e446ada..876b62aad5 100644
--- a/packages/chart/timeline/timeline.spec.ts
+++ b/packages/chart/timeline/timeline.spec.ts
@@ -63,8 +63,7 @@ describe('chart: timeline', () => {
       [data]="data"
       [slider]="slider"
       [delay]="delay"
-    >
-    </g2-timeline>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/chart/trend/trend.component.ts b/packages/chart/trend/trend.component.ts
index 80d18907b3..2bce55077a 100644
--- a/packages/chart/trend/trend.component.ts
+++ b/packages/chart/trend/trend.component.ts
@@ -6,7 +6,7 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
   selector: 'trend',
   exportAs: 'trend',
   template: `
-    <ng-content></ng-content>
+    <ng-content />
     <span *ngIf="flag" class="trend__{{ flag }}"><i nz-icon nzType="caret-{{ flag }}"></i></span>
   `,
   host: {
diff --git a/packages/chart/trend/trend.spec.ts b/packages/chart/trend/trend.spec.ts
index bce22019aa..ab674b1ba4 100644
--- a/packages/chart/trend/trend.spec.ts
+++ b/packages/chart/trend/trend.spec.ts
@@ -81,7 +81,7 @@ describe('abc: trend', () => {
 });
 
 @Component({
-  template: ` <trend #comp [flag]="flag" [colorful]="colorful" [reverseColor]="reverseColor"></trend> `
+  template: ` <trend #comp [flag]="flag" [colorful]="colorful" [reverseColor]="reverseColor" />`
 })
 class TestComponent {
   @ViewChild('comp', { static: true }) comp!: TrendComponent;
diff --git a/packages/chart/water-wave/water-wave.spec.ts b/packages/chart/water-wave/water-wave.spec.ts
index 104130412d..5a77a80e06 100644
--- a/packages/chart/water-wave/water-wave.spec.ts
+++ b/packages/chart/water-wave/water-wave.spec.ts
@@ -52,7 +52,7 @@ describe('chart: water-wave', () => {
       [percent]="percent"
       [delay]="delay"
       [animate]="animate"
-    ></g2-water-wave>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/form/spec/base.spec.ts b/packages/form/spec/base.spec.ts
index 3d7a3756ee..17e3b67dd2 100644
--- a/packages/form/spec/base.spec.ts
+++ b/packages/form/spec/base.spec.ts
@@ -369,7 +369,7 @@ export class SFPage {
       (formSubmit)="formSubmit($event)"
       (formReset)="formReset($event)"
       (formError)="formError($event)"
-    ></sf>
+    />
   `
 })
 export class TestFormComponent {
diff --git a/packages/form/spec/form.spec.ts b/packages/form/spec/form.spec.ts
index f800227661..7660fd6652 100644
--- a/packages/form/spec/form.spec.ts
+++ b/packages/form/spec/form.spec.ts
@@ -877,7 +877,7 @@ describe('form: component', () => {
 
 @Component({
   template: `
-    <sf [layout]="layout" #comp [schema]="schema" [ui]="ui" [button]="button" [mode]="mode" [loading]="loading"></sf>
+    <sf [layout]="layout" #comp [schema]="schema" [ui]="ui" [button]="button" [mode]="mode" [loading]="loading" />
   `
 })
 class TestModeComponent extends TestFormComponent {}
diff --git a/packages/form/src/sf-item-wrap.component.html b/packages/form/src/sf-item-wrap.component.html
index b067b448b7..c14725ee17 100644
--- a/packages/form/src/sf-item-wrap.component.html
+++ b/packages/form/src/sf-item-wrap.component.html
@@ -33,7 +33,7 @@
   <div nz-col class="ant-form-item-control" [nzSpan]="ui.spanControl!" [nzOffset]="ui.offsetControl!">
     <div class="ant-form-item-control-input">
       <div class="ant-form-item-control-input-content">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
     <div *ngIf="!ui.onlyVisual && showError" @helpMotion class="ant-form-item-explain ant-form-item-explain-connected">
diff --git a/packages/form/src/sf-item.component.ts b/packages/form/src/sf-item.component.ts
index e9ea852273..3c8e9bd433 100644
--- a/packages/form/src/sf-item.component.ts
+++ b/packages/form/src/sf-item.component.ts
@@ -27,8 +27,8 @@ let nextUniqueId = 0;
   exportAs: 'sfItem',
   host: { '[class.sf__item]': 'true' },
   template: `
-    <ng-template #target></ng-template>
-    <ng-container *ngTemplateOutlet="footer"></ng-container>
+    <ng-template #target />
+    <ng-container *ngTemplateOutlet="footer" />
   `,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
diff --git a/packages/form/src/sf.component.html b/packages/form/src/sf.component.html
index 329d66a21d..4f0632991e 100644
--- a/packages/form/src/sf.component.html
+++ b/packages/form/src/sf.component.html
@@ -1,5 +1,5 @@
 <ng-template #con>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>
 <ng-template #btnTpl>
   <ng-container *ngIf="button !== 'none'; else con">
@@ -71,5 +71,5 @@
   </ng-container>
 </ng-template>
 <form nz-form [nzLayout]="layout" (submit)="onSubmit($event)" [attr.autocomplete]="autocomplete">
-  <sf-item *ngIf="rootProperty" [formProperty]="rootProperty" [footer]="btnTpl"></sf-item>
+  <sf-item *ngIf="rootProperty" [formProperty]="rootProperty" [footer]="btnTpl" />
 </form>
diff --git a/packages/form/src/widgets/array/array.widget.html b/packages/form/src/widgets/array/array.widget.html
index c344c0bdd6..498f1fd33b 100644
--- a/packages/form/src/widgets/array/array.widget.html
+++ b/packages/form/src/widgets/array/array.widget.html
@@ -42,7 +42,7 @@
             class="sf__array-item"
           >
             <nz-card>
-              <sf-item [formProperty]="i"></sf-item>
+              <sf-item [formProperty]="i" />
               <span *ngIf="showRemove" class="sf__array-remove" (click)="removeItem(idx)" [attr.title]="removeTitle">
                 <i nz-icon nzType="delete"></i>
               </span>
diff --git a/packages/form/src/widgets/boolean/boolean.widget.html b/packages/form/src/widgets/boolean/boolean.widget.html
index 2bf2eacefa..fd288eab8d 100644
--- a/packages/form/src/widgets/boolean/boolean.widget.html
+++ b/packages/form/src/widgets/boolean/boolean.widget.html
@@ -7,6 +7,5 @@
     [nzCheckedChildren]="ui.checkedChildren!"
     [nzUnCheckedChildren]="ui.unCheckedChildren!"
     [nzLoading]="ui.loading"
-  >
-  </nz-switch>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/cascader/cascader.widget.html b/packages/form/src/widgets/cascader/cascader.widget.html
index 81d6ade1d7..25fee31981 100644
--- a/packages/form/src/widgets/cascader/cascader.widget.html
+++ b/packages/form/src/widgets/cascader/cascader.widget.html
@@ -24,6 +24,5 @@
     (nzClear)="_clear()"
     (nzVisibleChange)="_visibleChange($event)"
     (nzSelectionChange)="_selectionChange($event)"
-  >
-  </nz-cascader>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.html b/packages/form/src/widgets/checkbox/checkbox.widget.html
index 6d97e39863..58d19cdd1d 100644
--- a/packages/form/src/widgets/checkbox/checkbox.widget.html
+++ b/packages/form/src/widgets/checkbox/checkbox.widget.html
@@ -6,8 +6,9 @@
     [(ngModel)]="allChecked"
     (ngModelChange)="onAllChecked()"
     [nzIndeterminate]="indeterminate"
-    >{{ ui.checkAllText || l.checkAllText }}</label
   >
+    {{ ui.checkAllText || l.checkAllText }}
+  </label>
 </ng-template>
 <sf-item-wrap
   [id]="id"
@@ -41,14 +42,14 @@
   </ng-container>
   <ng-container *ngIf="inited && data.length > 0">
     <ng-container *ngIf="grid_span === 0">
-      <ng-template [ngTemplateOutlet]="all"></ng-template>
-      <nz-checkbox-group [ngModel]="data" (ngModelChange)="notifySet()"></nz-checkbox-group>
+      <ng-template [ngTemplateOutlet]="all" />
+      <nz-checkbox-group [ngModel]="data" (ngModelChange)="notifySet()" />
     </ng-container>
     <ng-container *ngIf="grid_span !== 0">
       <nz-checkbox-wrapper class="sf__checkbox-list" (nzOnChange)="groupInGridChange($event)">
         <div nz-row>
           <div nz-col [nzSpan]="grid_span" *ngIf="ui.checkAll">
-            <ng-template [ngTemplateOutlet]="all"></ng-template>
+            <ng-template [ngTemplateOutlet]="all" />
           </div>
           <div nz-col [nzSpan]="grid_span" *ngFor="let i of data">
             <label nz-checkbox [nzValue]="i.value" [ngModel]="i.checked" [nzDisabled]="i.disabled">{{ i.label }}</label>
diff --git a/packages/form/src/widgets/date/date.widget.html b/packages/form/src/widgets/date/date.widget.html
index e9d3b0146e..963abe9a65 100644
--- a/packages/form/src/widgets/date/date.widget.html
+++ b/packages/form/src/widgets/date/date.widget.html
@@ -19,7 +19,7 @@
       [nzRenderExtraFooter]="ui.renderExtraFooter"
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
-    ></nz-year-picker>
+    />
 
     <nz-month-picker
       *ngSwitchCase="'month'"
@@ -40,7 +40,7 @@
       [nzRenderExtraFooter]="ui.renderExtraFooter"
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
-    ></nz-month-picker>
+    />
 
     <nz-week-picker
       *ngSwitchCase="'week'"
@@ -60,7 +60,7 @@
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
       (nzOnOpenChange)="_openChange($event)"
-    ></nz-week-picker>
+    />
 
     <nz-range-picker
       *ngSwitchCase="'range'"
@@ -88,7 +88,7 @@
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
       (nzOnOk)="_ok($event)"
-    ></nz-range-picker>
+    />
 
     <nz-date-picker
       *ngSwitchDefault
@@ -114,6 +114,6 @@
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
       (nzOnOk)="_ok($event)"
-    ></nz-date-picker>
+    />
   </ng-container>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/number/number.widget.html b/packages/form/src/widgets/number/number.widget.html
index 85a52f619b..49ba13c457 100644
--- a/packages/form/src/widgets/number/number.widget.html
+++ b/packages/form/src/widgets/number/number.widget.html
@@ -14,6 +14,5 @@
     [nzPlaceHolder]="ui.placeholder || ''"
     [style.width]="width"
     [ngClass]="{ 'ant-input-number__hide-step': ui.hideStep }"
-  >
-  </nz-input-number>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/object/object.widget.html b/packages/form/src/widgets/object/object.widget.html
index 149a83fa79..0c050d8546 100644
--- a/packages/form/src/widgets/object/object.widget.html
+++ b/packages/form/src/widgets/object/object.widget.html
@@ -15,7 +15,7 @@
             [nzXl]="i.grid.xl"
             [nzXXl]="i.grid.xxl"
           >
-            <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
+            <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed" />
           </div>
         </ng-container>
       </ng-container>
@@ -24,7 +24,7 @@
   <ng-template #noGrid>
     <ng-container *ngFor="let i of list">
       <ng-container *ngIf="i.property.visible && i.show">
-        <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
+        <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed" />
       </ng-container>
     </ng-container>
   </ng-template>
@@ -47,5 +47,5 @@
       {{ title }}
     </div>
   </ng-template>
-  <ng-template [ngTemplateOutlet]="default" [ngTemplateOutletContext]="{ $implicit: true }"></ng-template>
+  <ng-template [ngTemplateOutlet]="default" [ngTemplateOutletContext]="{ $implicit: true }" />
 </nz-card>
diff --git a/packages/form/src/widgets/rate/rate.widget.html b/packages/form/src/widgets/rate/rate.widget.html
index 6ea2591e4a..a7c5e18e1d 100644
--- a/packages/form/src/widgets/rate/rate.widget.html
+++ b/packages/form/src/widgets/rate/rate.widget.html
@@ -8,6 +8,6 @@
     [nzTooltips]="ui.tooltips || []"
     [nzAutoFocus]="autoFocus"
     [nzCount]="$any(count)"
-  ></nz-rate>
+  />
   <span *ngIf="hasText && formProperty.value" class="ant-rate-text">{{ text }}</span>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/select/select.widget.html b/packages/form/src/widgets/select/select.widget.html
index 3b0fb85d6b..be0bbd535b 100644
--- a/packages/form/src/widgets/select/select.widget.html
+++ b/packages/form/src/widgets/select/select.widget.html
@@ -42,7 +42,7 @@
         [nzValue]="o.value"
         [nzHide]="o.hide"
         [nzDisabled]="o.disabled"
-      ></nz-option>
+      />
     </ng-container>
     <ng-container *ngIf="!loading && hasGroup">
       <nz-option-group *ngFor="let i of data" [nzLabel]="i.label">
@@ -52,7 +52,7 @@
           [nzValue]="o.value"
           [nzDisabled]="o.disabled"
           [nzHide]="o.hide"
-        ></nz-option>
+        />
       </nz-option-group>
     </ng-container>
     <nz-option *ngIf="loading" nzDisabled nzCustomContent>
diff --git a/packages/form/src/widgets/slider/slider.widget.html b/packages/form/src/widgets/slider/slider.widget.html
index 8ba856a5a5..5ec0c26c41 100644
--- a/packages/form/src/widgets/slider/slider.widget.html
+++ b/packages/form/src/widgets/slider/slider.widget.html
@@ -13,6 +13,5 @@
     [nzVertical]="ui.vertical"
     [nzTipFormatter]="_formatter"
     (nzOnAfterChange)="_afterChange($event)"
-  >
-  </nz-slider>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/string/string.widget.html b/packages/form/src/widgets/string/string.widget.html
index 1df6e160a4..5c02b664c9 100644
--- a/packages/form/src/widgets/string/string.widget.html
+++ b/packages/form/src/widgets/string/string.widget.html
@@ -31,7 +31,7 @@
       [nzSuffix]="ui.suffix"
       [nzSuffixIcon]="ui.suffixIcon"
     >
-      <ng-template [ngTemplateOutlet]="ipt"></ng-template>
+      <ng-template [ngTemplateOutlet]="ipt" />
     </nz-input-group>
   </ng-container>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/tag/tag.widget.html b/packages/form/src/widgets/tag/tag.widget.html
index 17fb614e46..feb5e91a6b 100644
--- a/packages/form/src/widgets/tag/tag.widget.html
+++ b/packages/form/src/widgets/tag/tag.widget.html
@@ -18,11 +18,11 @@
     (nzCheckedChange)="onChange(i)"
   >
     <ng-container *ngIf="i.prefixIcon">
-      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.prefixIcon }"></ng-template>
+      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.prefixIcon }" />
     </ng-container>
     <span>{{ i.label }}</span>
     <ng-container *ngIf="i.suffixIcon">
-      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.suffixIcon }"></ng-template>
+      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.suffixIcon }" />
     </ng-container>
   </nz-tag>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/time/time.widget.html b/packages/form/src/widgets/time/time.widget.html
index 38666d332b..0509498b46 100644
--- a/packages/form/src/widgets/time/time.widget.html
+++ b/packages/form/src/widgets/time/time.widget.html
@@ -22,6 +22,5 @@
     [nzNowText]="ui.nowText!"
     [nzOkText]="ui.okText!"
     (nzOpenChange)="_openChange($event)"
-  >
-  </nz-time-picker>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/transfer/transfer.widget.html b/packages/form/src/widgets/transfer/transfer.widget.html
index b6b113f8d1..766e55b115 100644
--- a/packages/form/src/widgets/transfer/transfer.widget.html
+++ b/packages/form/src/widgets/transfer/transfer.widget.html
@@ -14,6 +14,5 @@
     (nzChange)="_change($event)"
     (nzSearchChange)="_searchChange($event)"
     (nzSelectChange)="_selectChange($event)"
-  >
-  </nz-transfer>
+  />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/tree-select/tree-select.widget.html b/packages/form/src/widgets/tree-select/tree-select.widget.html
index f14da9ca1b..dbe3e76727 100644
--- a/packages/form/src/widgets/tree-select/tree-select.widget.html
+++ b/packages/form/src/widgets/tree-select/tree-select.widget.html
@@ -32,6 +32,5 @@
     [nzVirtualMinBufferPx]="ui.virtualMinBufferPx || 28"
     (ngModelChange)="change($event)"
     (nzExpandChange)="expandChange($event)"
-  >
-  </nz-tree-select>
+  />
 </sf-item-wrap>
diff --git a/packages/form/widgets-third/markdown/markdown.widget.ts b/packages/form/widgets-third/markdown/markdown.widget.ts
index c4f4cf57be..e751dcdd8f 100644
--- a/packages/form/widgets-third/markdown/markdown.widget.ts
+++ b/packages/form/widgets-third/markdown/markdown.widget.ts
@@ -13,12 +13,7 @@ import { ControlWidget } from '@delon/form';
       [error]="error"
       [showTitle]="schema.title"
     >
-      <simplemde
-        [ngModel]="value"
-        (ngModelChange)="_change($event)"
-        [options]="ui.options"
-        [delay]="ui.delay || 300"
-      ></simplemde>
+      <simplemde [ngModel]="value" (ngModelChange)="_change($event)" [options]="ui.options" [delay]="ui.delay || 300" />
     </sf-item-wrap>
   `
 })
diff --git a/packages/form/widgets-third/tinymce/tinymce.widget.ts b/packages/form/widgets-third/tinymce/tinymce.widget.ts
index cef4c22e3f..6594d5b652 100644
--- a/packages/form/widgets-third/tinymce/tinymce.widget.ts
+++ b/packages/form/widgets-third/tinymce/tinymce.widget.ts
@@ -13,7 +13,7 @@ import { ControlWidget } from '@delon/form';
       [error]="error"
       [showTitle]="schema.title"
     >
-      <tinymce [ngModel]="value" (ngModelChange)="change($event)" [config]="config" [loading]="loading"> </tinymce>
+      <tinymce [ngModel]="value" (ngModelChange)="change($event)" [config]="config" [loading]="loading" />
     </sf-item-wrap>
   `
 })
diff --git a/packages/mock/src/mock.interceptor.spec.ts b/packages/mock/src/mock.interceptor.spec.ts
index 2b2edf4363..f94c7be99e 100644
--- a/packages/mock/src/mock.interceptor.spec.ts
+++ b/packages/mock/src/mock.interceptor.spec.ts
@@ -283,6 +283,6 @@ describe('mock: interceptor', () => {
 
 @Component({
   selector: 'root-cmp',
-  template: ` <router-outlet></router-outlet> `
+  template: ` <router-outlet />`
 })
 class RootComponent {}
diff --git a/packages/theme/layout-default/index.en-US.md b/packages/theme/layout-default/index.en-US.md
index b769d7ee11..b3043035b4 100644
--- a/packages/theme/layout-default/index.en-US.md
+++ b/packages/theme/layout-default/index.en-US.md
@@ -41,14 +41,14 @@ import { environment } from '@env/environment';
         </div>
       </layout-default-header-item>
       <layout-default-header-item direction="middle">
-        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search>
+        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus" />
       </layout-default-header-item>
       <layout-default-header-item direction="right" hidden="mobile">
-        <header-task></header-task>
+        <header-task />
       </layout-default-header-item>
       <ng-template #asideUserTpl>
         <div nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu" class="alain-default__aside-user">
-          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar"></nz-avatar>
+          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar" />
           <div class="alain-default__aside-user-info">
             <strong>{{ user.name }}</strong>
             <p class="mb0">{{ user.email }}</p>
@@ -62,15 +62,15 @@ import { environment } from '@env/environment';
         </nz-dropdown-menu>
       </ng-template>
       <ng-template #navTpl>
-        <layout-default-nav class="d-block py-lg"></layout-default-nav>
+        <layout-default-nav class="d-block py-lg" />
       </ng-template>
       <ng-template #contentTpl>
-        <router-outlet></router-outlet>
+        <router-outlet />
       </ng-template>
     </layout-default>
 
-    <setting-drawer *ngIf="showSettingDrawer"></setting-drawer>
-    <theme-btn></theme-btn>
+    <setting-drawer *ngIf="showSettingDrawer" />
+    <theme-btn />
   `,
 })
 export class LayoutBasicComponent {
diff --git a/packages/theme/layout-default/index.zh-CN.md b/packages/theme/layout-default/index.zh-CN.md
index 4bc750c1a9..32f11bf487 100644
--- a/packages/theme/layout-default/index.zh-CN.md
+++ b/packages/theme/layout-default/index.zh-CN.md
@@ -41,14 +41,14 @@ import { environment } from '@env/environment';
         </div>
       </layout-default-header-item>
       <layout-default-header-item direction="middle">
-        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search>
+        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus" />
       </layout-default-header-item>
       <layout-default-header-item direction="right" hidden="mobile">
-        <header-task></header-task>
+        <header-task />
       </layout-default-header-item>
       <ng-template #asideUserTpl>
         <div nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu" class="alain-default__aside-user">
-          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar"></nz-avatar>
+          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar" />
           <div class="alain-default__aside-user-info">
             <strong>{{ user.name }}</strong>
             <p class="mb0">{{ user.email }}</p>
@@ -62,15 +62,15 @@ import { environment } from '@env/environment';
         </nz-dropdown-menu>
       </ng-template>
       <ng-template #navTpl>
-        <layout-default-nav class="d-block py-lg"></layout-default-nav>
+        <layout-default-nav class="d-block py-lg" />
       </ng-template>
       <ng-template #contentTpl>
-        <router-outlet></router-outlet>
+        <router-outlet />
       </ng-template>
     </layout-default>
 
-    <setting-drawer *ngIf="showSettingDrawer"></setting-drawer>
-    <theme-btn></theme-btn>
+    <setting-drawer *ngIf="showSettingDrawer" />
+    <theme-btn />
   `,
 })
 export class LayoutBasicComponent {
diff --git a/packages/theme/layout-default/layout-header-item.component.ts b/packages/theme/layout-default/layout-header-item.component.ts
index fd1ca3f136..9d1e99f99a 100644
--- a/packages/theme/layout-default/layout-header-item.component.ts
+++ b/packages/theme/layout-default/layout-header-item.component.ts
@@ -6,7 +6,7 @@ import { LayoutDefaultHeaderItemDirection, LayoutDefaultHeaderItemHidden } from
   selector: 'layout-default-header-item',
   template: `
     <ng-template #host>
-      <ng-content></ng-content>
+      <ng-content />
     </ng-template>
   `
 })
diff --git a/packages/theme/layout-default/layout-header.component.ts b/packages/theme/layout-default/layout-header.component.ts
index e7228fd31a..e6ddd1450d 100644
--- a/packages/theme/layout-default/layout-header.component.ts
+++ b/packages/theme/layout-default/layout-header.component.ts
@@ -29,7 +29,7 @@ interface LayoutDefaultHeaderItem {
   template: `
     <ng-template #render let-ls>
       <li *ngFor="let i of ls" [class.hidden-mobile]="i.hidden === 'mobile'" [class.hidden-pc]="i.hidden === 'pc'">
-        <ng-container *ngTemplateOutlet="i.host"></ng-container>
+        <ng-container *ngTemplateOutlet="i.host" />
       </li>
     </ng-template>
     <div class="alain-default__header-logo" [style.width.px]="opt.logoFixWidth">
@@ -47,13 +47,13 @@ interface LayoutDefaultHeaderItem {
             <span nz-icon [nzType]="collapsedIcon"></span>
           </div>
         </li>
-        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: left }"></ng-template>
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: left }" />
       </ul>
       <div *ngIf="middle.length > 0" class="alain-default__nav alain-default__nav-middle">
-        <ng-container *ngTemplateOutlet="middle[0].host"></ng-container>
+        <ng-container *ngTemplateOutlet="middle[0].host" />
       </div>
       <ul class="alain-default__nav">
-        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: right }"></ng-template>
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: right }" />
       </ul>
     </div>
   `,
diff --git a/packages/theme/layout-default/layout-nav.component.html b/packages/theme/layout-default/layout-nav.component.html
index 445895442e..76342cac65 100644
--- a/packages/theme/layout-default/layout-nav.component.html
+++ b/packages/theme/layout-default/layout-nav.component.html
@@ -36,10 +36,10 @@
       >
         <ng-container *ngIf="i._needIcon">
           <ng-container *ngIf="!collapsed">
-            <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }"></ng-template>
+            <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }" />
           </ng-container>
           <span *ngIf="collapsed" nz-tooltip nzTooltipPlacement="right" [nzTooltipTitle]="i.text">
-            <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }"></ng-template>
+            <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }" />
           </span>
         </ng-container>
         <span class="sidebar-nav__item-text" [innerHTML]="i._text" [attr.title]="i.text"></span>
@@ -51,14 +51,14 @@
         (mouseenter)="showSubMenu($event, i)"
         class="sidebar-nav__item-link"
       >
-        <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }"></ng-template>
+        <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.icon }" />
         <span class="sidebar-nav__item-text" [innerHTML]="i._text" [attr.title]="i.text"></span>
         <i class="sidebar-nav__sub-arrow"></i>
       </a>
       <!-- badge -->
-      <nz-badge *ngIf="i.badge" [nzCount]="i.badge" [nzDot]="i.badgeDot" nzStandalone [nzOverflowCount]="9"></nz-badge>
+      <nz-badge *ngIf="i.badge" [nzCount]="i.badge" [nzDot]="i.badgeDot" nzStandalone [nzOverflowCount]="9" />
       <ul *ngIf="i.children.length > 0" class="sidebar-nav sidebar-nav__sub sidebar-nav__depth{{ i._depth }}">
-        <ng-template [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{ $implicit: i.children }"></ng-template>
+        <ng-template [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{ $implicit: i.children }" />
       </ul>
     </li>
   </ng-container>
@@ -68,6 +68,6 @@
     <li class="sidebar-nav__item sidebar-nav__group-title" *ngIf="group.group">
       <span [innerHTML]="group._text"></span>
     </li>
-    <ng-template [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{ $implicit: group.children }"></ng-template>
+    <ng-template [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{ $implicit: group.children }" />
   </ng-container>
 </ul>
diff --git a/packages/theme/layout-default/layout-nav.component.spec.ts b/packages/theme/layout-default/layout-nav.component.spec.ts
index b8ca82e281..753d61095d 100644
--- a/packages/theme/layout-default/layout-nav.component.spec.ts
+++ b/packages/theme/layout-default/layout-nav.component.spec.ts
@@ -641,7 +641,7 @@ describe('theme: layout-default-nav', () => {
       [recursivePath]="recursivePath"
       [openStrictly]="openStrictly"
       (select)="select()"
-    ></layout-default-nav>
+    />
   `
 })
 class TestComponent {
diff --git a/packages/theme/layout-default/layout-top-menu-item.ts b/packages/theme/layout-default/layout-top-menu-item.ts
index fd1dd7e8f8..37893e16b2 100644
--- a/packages/theme/layout-default/layout-top-menu-item.ts
+++ b/packages/theme/layout-default/layout-top-menu-item.ts
@@ -4,7 +4,7 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 
 @Component({
   selector: 'layout-default-top-menu-item',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
   host: {
     '[class.alain-default__nav-item]': `true`,
     '[class.alain-default__top-menu-item]': `true`,
diff --git a/packages/theme/layout-default/layout.component.ts b/packages/theme/layout-default/layout.component.ts
index 0fbfdab629..28faa79d54 100644
--- a/packages/theme/layout-default/layout.component.ts
+++ b/packages/theme/layout-default/layout.component.ts
@@ -36,13 +36,13 @@ import { LayoutDefaultOptions } from './types';
   exportAs: 'layoutDefault',
   template: `
     <div class="alain-default__progress-bar" *ngIf="showFetching"></div>
-    <layout-default-header *ngIf="!opt.hideHeader" [items]="headerItems"></layout-default-header>
+    <layout-default-header *ngIf="!opt.hideHeader" [items]="headerItems" />
     <div *ngIf="!opt.hideAside" class="alain-default__aside">
       <div class="alain-default__aside-wrap">
         <div class="alain-default__aside-inner">
-          <ng-container *ngTemplateOutlet="asideUser"></ng-container>
-          <ng-container *ngTemplateOutlet="nav"></ng-container>
-          <layout-default-nav *ngIf="!nav"></layout-default-nav>
+          <ng-container *ngTemplateOutlet="asideUser" />
+          <ng-container *ngTemplateOutlet="nav" />
+          <layout-default-nav *ngIf="!nav" />
         </div>
         <div *ngIf="opt.showSiderCollapse" class="alain-default__aside-link">
           <ng-container *ngIf="asideBottom === null; else asideBottom">
@@ -54,8 +54,8 @@ import { LayoutDefaultOptions } from './types';
       </div>
     </div>
     <section class="alain-default__content">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-      <ng-content></ng-content>
+      <ng-container *ngTemplateOutlet="content" />
+      <ng-content />
     </section>
   `
 })
diff --git a/packages/theme/setting-drawer/setting-drawer-item.component.html b/packages/theme/setting-drawer/setting-drawer-item.component.html
index 8f53d9f523..3c4b30da0f 100644
--- a/packages/theme/setting-drawer/setting-drawer-item.component.html
+++ b/packages/theme/setting-drawer/setting-drawer-item.component.html
@@ -23,12 +23,12 @@
       [nzMax]="i.max"
       [nzStep]="i.step || 2"
       [nzFormatter]="format"
-    ></nz-input-number>
+    />
   </ng-container>
   <ng-container *ngSwitchCase="'switch'">
-    <nz-switch nzSize="small" [(ngModel)]="i.value" [ngModelOptions]="{ standalone: true }"></nz-switch>
+    <nz-switch nzSize="small" [(ngModel)]="i.value" [ngModelOptions]="{ standalone: true }" />
   </ng-container>
   <ng-container *ngSwitchDefault>
-    <ng-template nzDrawerContent></ng-template>
+    <ng-template nzDrawerContent />
   </ng-container>
 </div>
diff --git a/packages/theme/setting-drawer/setting-drawer.component.html b/packages/theme/setting-drawer/setting-drawer.component.html
index 7bf2eab3ca..cc0f3b36e1 100644
--- a/packages/theme/setting-drawer/setting-drawer.component.html
+++ b/packages/theme/setting-drawer/setting-drawer.component.html
@@ -18,48 +18,44 @@ <h3 class="setting-drawer__title">主题色</h3>
         <i *ngIf="color === c.color" nz-icon nzType="check"></i>
       </span>
     </div>
-    <nz-divider></nz-divider>
+    <nz-divider />
     <div class="setting-drawer__body">
       <h3 class="setting-drawer__title">设置</h3>
       <nz-tabset>
         <nz-tab nzTitle="顶部">
           <div class="setting-drawer__body">
-            <setting-drawer-item [data]="data['alain-default-header-hg']"></setting-drawer-item>
-            <setting-drawer-item [data]="data['alain-default-header-bg']"></setting-drawer-item>
-            <setting-drawer-item [data]="data['alain-default-header-padding']"></setting-drawer-item>
+            <setting-drawer-item [data]="data['alain-default-header-hg']" />
+            <setting-drawer-item [data]="data['alain-default-header-bg']" />
+            <setting-drawer-item [data]="data['alain-default-header-padding']" />
           </div>
         </nz-tab>
         <nz-tab nzTitle="侧边栏">
-          <setting-drawer-item [data]="data['alain-default-aside-wd']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-aside-bg']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-aside-collapsed-wd']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-aside-nav-padding-top-bottom']"></setting-drawer-item>
+          <setting-drawer-item [data]="data['alain-default-aside-wd']" />
+          <setting-drawer-item [data]="data['alain-default-aside-bg']" />
+          <setting-drawer-item [data]="data['alain-default-aside-collapsed-wd']" />
+          <setting-drawer-item [data]="data['alain-default-aside-nav-padding-top-bottom']" />
         </nz-tab>
         <nz-tab nzTitle="内容">
-          <setting-drawer-item [data]="data['alain-default-content-bg']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-content-heading-bg']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-content-heading-border']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['alain-default-content-padding']"></setting-drawer-item>
+          <setting-drawer-item [data]="data['alain-default-content-bg']" />
+          <setting-drawer-item [data]="data['alain-default-content-heading-bg']" />
+          <setting-drawer-item [data]="data['alain-default-content-heading-border']" />
+          <setting-drawer-item [data]="data['alain-default-content-padding']" />
         </nz-tab>
         <nz-tab nzTitle="其它">
-          <setting-drawer-item [data]="data['form-state-visual-feedback-enabled']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['preserve-white-spaces-enabled']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['nz-table-img-radius']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['nz-table-img-margin-right']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['nz-table-img-max-width']"></setting-drawer-item>
-          <setting-drawer-item [data]="data['nz-table-img-max-height']"></setting-drawer-item>
+          <setting-drawer-item [data]="data['form-state-visual-feedback-enabled']" />
+          <setting-drawer-item [data]="data['preserve-white-spaces-enabled']" />
+          <setting-drawer-item [data]="data['nz-table-img-radius']" />
+          <setting-drawer-item [data]="data['nz-table-img-margin-right']" />
+          <setting-drawer-item [data]="data['nz-table-img-max-width']" />
+          <setting-drawer-item [data]="data['nz-table-img-max-height']" />
         </nz-tab>
       </nz-tabset>
     </div>
-    <nz-divider></nz-divider>
+    <nz-divider />
     <div class="setting-drawer__body">
       <div class="setting-drawer__body-item">
         固定头和侧边栏
-        <nz-switch
-          nzSize="small"
-          [(ngModel)]="layout.fixed"
-          (ngModelChange)="setLayout('fixed', layout.fixed)"
-        ></nz-switch>
+        <nz-switch nzSize="small" [(ngModel)]="layout.fixed" (ngModelChange)="setLayout('fixed', layout.fixed)" />
       </div>
       <div class="setting-drawer__body-item">
         色弱模式
@@ -67,10 +63,10 @@ <h3 class="setting-drawer__title">设置</h3>
           nzSize="small"
           [(ngModel)]="layout.colorWeak"
           (ngModelChange)="setLayout('colorWeak', layout.colorWeak)"
-        ></nz-switch>
+        />
       </div>
     </div>
-    <nz-divider></nz-divider>
+    <nz-divider />
     <button (click)="apply()" type="button" nz-button nzType="primary">预览</button>
     <button (click)="reset()" type="button" nz-button>重置</button>
     <button (click)="copyVar()" type="button" nz-button>拷贝</button>
@@ -78,7 +74,7 @@ <h3 class="setting-drawer__title">设置</h3>
       class="mt-md"
       nzType="warning"
       nzMessage="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改参数配置文件 src/styles/theme.less"
-    ></nz-alert>
+    />
   </div>
 </nz-drawer>
 <div
diff --git a/packages/theme/theme-btn/theme-btn.component.html b/packages/theme/theme-btn/theme-btn.component.html
index 6b5d7fae9e..af5186d04a 100644
--- a/packages/theme/theme-btn/theme-btn.component.html
+++ b/packages/theme/theme-btn/theme-btn.component.html
@@ -18,7 +18,7 @@
       <g fill-rule="nonzero">
         <path
           d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z"
-        ></path>
+        />
       </g>
     </g>
   </svg>
diff --git a/packages/util/browser/index.en-US.md b/packages/util/browser/index.en-US.md
index a90c163c43..9648a64c94 100644
--- a/packages/util/browser/index.en-US.md
+++ b/packages/util/browser/index.en-US.md
@@ -17,7 +17,7 @@ A set of simple Cookie manipulation classes.
 
 ## isEmpty
 
-Used to verify `<ng-content></ng-content>` is empty, useful for custom components.
+Used to verify `<ng-content />` is empty, useful for custom components.
 
 ## updateHostClass
 
diff --git a/packages/util/browser/index.zh-CN.md b/packages/util/browser/index.zh-CN.md
index 1bce58383e..8ff733147f 100644
--- a/packages/util/browser/index.zh-CN.md
+++ b/packages/util/browser/index.zh-CN.md
@@ -17,7 +17,7 @@ type: Tools
 
 ## isEmpty
 
-用于校验 `<ng-content></ng-content>` 是否为空，自定义组件时蛮有用。
+用于校验 `<ng-content />` 是否为空，自定义组件时蛮有用。
 
 ## updateHostClass
 
@@ -49,4 +49,4 @@ updateHostClass(
 | `getScrollPosition` | `element?: Element` | 获取滚动条位置 |
 | `scrollToPosition` | `element: Element | Window, position: [number, number]` | 设置滚动条位置 |
 | `scrollToElement` | `element?: Element, topOffset = 0` | 设置滚动条至指定元素 |
-| `scrollToTop` | `topOffset = 0` | 滚动至顶部 |
\ No newline at end of file
+| `scrollToTop` | `topOffset = 0` | 滚动至顶部 |
diff --git a/packages/util/browser/is-empty.ts b/packages/util/browser/is-empty.ts
index d909bcf01b..c11c6380a2 100644
--- a/packages/util/browser/is-empty.ts
+++ b/packages/util/browser/is-empty.ts
@@ -1,7 +1,7 @@
 /**
- * Used to verify `<ng-content></ng-content>` is empty, useful for custom components.
+ * Used to verify `<ng-content />` is empty, useful for custom components.
  *
- * 用于校验 `<ng-content></ng-content>` 是否为空，自定义组件时蛮有用。
+ * 用于校验 `<ng-content />` 是否为空，自定义组件时蛮有用。
  */
 export function isEmpty(element: HTMLElement): boolean {
   const nodes = element.childNodes;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3e53380525..c972930a62 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -9,7 +9,7 @@ import { I18NService, MetaService, MobileService } from '@core';
 
 @Component({
   selector: 'app-root',
-  template: ` <router-outlet></router-outlet>`
+  template: ` <router-outlet />`
 })
 export class AppComponent {
   @HostBinding('class.mobile')
diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index eb358ec99b..47b8fa933e 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -76,12 +76,12 @@ <h1>
     </h1>
   </div>
   <div nz-col nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="0" nzXl="19" nzXXl="20" class="menu-row">
-    <header-search></header-search>
+    <header-search />
     <ng-container *ngIf="!isMobile">
       <ng-template [ngTemplateOutlet]="menu"></ng-template>
       <nz-select nzSize="small" class="version" [ngModel]="currentVersion" (ngModelChange)="toVersion($event)">
-        <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version + '.x'" [nzValue]="version"></nz-option>
-        <nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion"></nz-option>
+        <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version + '.x'" [nzValue]="version" />
+        <nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion" />
       </nz-select>
       <button
         nz-button
@@ -95,7 +95,7 @@ <h1>
       <button nz-button nzGhost nzSize="small" class="header-button header-direction-button" (click)="rtl.toggle()">
         {{ rtl.nextDir | uppercase }}
       </button>
-      <github-button type="stargazers" size="default" namespace="ng-alain" repo="ng-alain"></github-button>
+      <github-button type="stargazers" size="default" namespace="ng-alain" repo="ng-alain" />
     </ng-container>
   </div>
 </div>
diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts
index 70b3428964..58f9b35b43 100644
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -13,11 +13,11 @@ import { AppService, SiteTheme } from '../core/app.service';
   selector: 'app-layout',
   template: `
     <ng-container *ngIf="render">
-      <app-header></app-header>
-      <nz-spin *ngIf="isFetching" class="fetching" nzSpinning></nz-spin>
-      <router-outlet></router-outlet>
-      <nz-back-top></nz-back-top>
-      <theme-btn (themeChange)="themeChange($event)"></theme-btn>
+      <app-header />
+      <nz-spin *ngIf="isFetching" class="fetching" nzSpinning />
+      <router-outlet />
+      <nz-back-top />
+      <theme-btn (themeChange)="themeChange($event)" />
     </ng-container>
   `,
   host: {
diff --git a/src/app/routes/form-pages/validator/validator.component.html b/src/app/routes/form-pages/validator/validator.component.html
index dd7e4eaf27..8968369021 100644
--- a/src/app/routes/form-pages/validator/validator.component.html
+++ b/src/app/routes/form-pages/validator/validator.component.html
@@ -1,7 +1,7 @@
 <div nz-row class="border-bottom-1 pb-sm mb-md">
   <div nz-col [nzSpan]="18">
     <nz-select [(ngModel)]="name" (ngModelChange)="getSchema()">
-      <nz-option *ngFor="let i of files" [nzValue]="i.name" [nzLabel]="i.title"></nz-option>
+      <nz-option *ngFor="let i of files" [nzValue]="i.name" [nzLabel]="i.title" />
     </nz-select>
     <nz-radio-group [(ngModel)]="layout" class="ml-sm">
       <label nz-radio-button nzValue="horizontal">水平</label>
@@ -39,7 +39,7 @@
           (ngModelChange)="run()"
           [options]="editorOptions"
           height="500px"
-        ></nu-monaco-editor>
+        />
       </nz-tab>
       <nz-tab nzTitle="Form Data" (nzClick)="refreshLayout('formCodeEditor')">
         <nu-monaco-editor
@@ -48,7 +48,7 @@
           (ngModelChange)="run()"
           [options]="editorOptions"
           height="500px"
-        ></nu-monaco-editor>
+        />
       </nz-tab>
       <nz-tab nzTitle="UI Schema" (nzClick)="refreshLayout('uiEditor')">
         <nu-monaco-editor
@@ -57,7 +57,7 @@
           (ngModelChange)="run()"
           [options]="editorOptions"
           height="500px"
-        ></nu-monaco-editor>
+        />
       </nz-tab>
     </nz-tabset>
   </div>
@@ -71,6 +71,6 @@
       (formChange)="change($event)"
       (formValueChange)="valueChange($event)"
       (formError)="error($event)"
-    ></sf>
+    />
   </div>
 </div>
diff --git a/src/app/routes/home/home.component.html b/src/app/routes/home/home.component.html
index a722952126..020e663e57 100644
--- a/src/app/routes/home/home.component.html
+++ b/src/app/routes/home/home.component.html
@@ -18,13 +18,7 @@ <h1 data-aos="fade-up" data-aos-once="true">NG-ALAIN</h1>
           国内镜像：<a href="https://ng-alain.gitee.io" target="_blank">ng-alain.gitee.io</a>
         </ng-template>
       </a>
-      <github-button
-        *ngIf="isBrowser"
-        type="stargazers"
-        size="large"
-        namespace="ng-alain"
-        repo="ng-alain"
-      ></github-button>
+      <github-button *ngIf="isBrowser" type="stargazers" size="large" namespace="ng-alain" repo="ng-alain" />
     </div>
   </div>
   <nz-carousel class="page-banner__img" nzAutoPlay>
@@ -136,4 +130,4 @@ <h3>{{ 'app.home.theme.' + t | i18n }}</h3>
     </div>
   </div>
 </div>
-<app-footer></app-footer>
+<app-footer />
diff --git a/src/app/shared/components/code-box/code-box.component.html b/src/app/shared/components/code-box/code-box.component.html
index df88c14a37..9860d5fd52 100644
--- a/src/app/shared/components/code-box/code-box.component.html
+++ b/src/app/shared/components/code-box/code-box.component.html
@@ -1,7 +1,7 @@
 <section class="code-box-demo" [ngStyle]="{ background: item.bg }">
   <div [ngClass]="{ 'browser-mockup': item.browser }" [ngStyle]="{ 'height.px': item.browser }">
     <div [ngClass]="{ 'browser-scroll': item.browser }">
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   </div>
 </section>
@@ -9,7 +9,7 @@
   <ng-container *ngIf="type === 'default'">
     <div class="code-box-title">
       {{ item.title }}
-      <edit-button [item]="item"></edit-button>
+      <edit-button [item]="item" />
     </div>
     <div class="code-box-description" [innerHTML]="item.summary"></div>
   </ng-container>
diff --git a/src/app/shared/components/content/content.component.html b/src/app/shared/components/content/content.component.html
index bc92ba5714..ed0712ddb7 100644
--- a/src/app/shared/components/content/content.component.html
+++ b/src/app/shared/components/content/content.component.html
@@ -6,7 +6,7 @@
   </div>
   <div nz-col nzXs="24" nzSm="24" nzMd="18" nzLg="18" nzXl="19" nzXXl="20">
     <div class="main-container" [class.pages-container]="meta.isPages">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
     <div *ngIf="meta.next || meta.prev" class="prev-next-nav">
       <a class="prev-page" *ngIf="meta.prev" routerLink="{{ meta.prev.url }}">
@@ -20,7 +20,7 @@
         <i nz-icon nzType="right" class="footer-nav-icon-after"></i>
       </a>
     </div>
-    <app-footer small></app-footer>
+    <app-footer small />
   </div>
 </div>
 <div *ngIf="isMobile" class="drawer-wrapper">
@@ -28,7 +28,7 @@
     <div class="drawer-mask" (click)="opened = !opened"></div>
     <div class="drawer-content-wrapper">
       <div class="drawer-content">
-        <main-menu (to)="to()"></main-menu>
+        <main-menu (to)="to()" />
       </div>
       <div class="drawer-button" (click)="opened = !opened"><i nz-icon nzType="menu-unfold"></i></div>
     </div>
diff --git a/src/app/shared/components/docs/docs.component.html b/src/app/shared/components/docs/docs.component.html
index aa1a1cd152..df9eb6cd9b 100644
--- a/src/app/shared/components/docs/docs.component.html
+++ b/src/app/shared/components/docs/docs.component.html
@@ -2,7 +2,7 @@
   <nz-anchor nzShowInkInFixed nzAffix="false" (nzClick)="goLink($event)">
     <nz-link *ngFor="let t of data.con.toc" [nzHref]="'#' + t.id" [nzTitle]="t.title">
       <ng-container *ngIf="t.children && t.children.length > 0">
-        <nz-link *ngFor="let t2 of t.children" [nzHref]="'#' + t2.id" [nzTitle]="t2.title"></nz-link>
+        <nz-link *ngFor="let t2 of t.children" [nzHref]="'#' + t2.id" [nzTitle]="t2.title" />
       </ng-container>
     </nz-link>
   </nz-anchor>
@@ -38,13 +38,13 @@ <h1 class="flex-center">
           IMPORT MODULE
         </span>
       </div>
-      <edit-button [item]="item"></edit-button>
+      <edit-button [item]="item" />
     </h1>
   </div>
   <div *ngIf="data.con.content" class="markdown" [innerHTML]="data.con.content" routeTransfer></div>
   <ng-container *ngIf="data.demo">
     <h2 id="{{ demoStr }}" style="margin: 32px 0 24px 0" [innerHTML]="demoContent" routeTransfer></h2>
-    <ng-content></ng-content>
+    <ng-content />
   </ng-container>
   <div *ngIf="data.con.api" class="markdown api-container" [innerHTML]="data.con.api" routeTransfer></div>
 </ng-container>
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a8420e45bb..5aa8e74ca5 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -76,7 +76,7 @@ <h2>{{ 'app.footer.community' | i18n }}</h2>
             <div class="theme-color-value" [ngStyle]="{ background: color }"></div>
           </div>
           <ng-template #colorTpl>
-            <color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
+            <color-sketch [color]="color" (onChangeComplete)="changeColor($event)" />
           </ng-template>
         </div>
       </div>
diff --git a/src/dev/home/home.component.ts b/src/dev/home/home.component.ts
index b6440b31c4..e074c5d6c4 100644
--- a/src/dev/home/home.component.ts
+++ b/src/dev/home/home.component.ts
@@ -5,7 +5,7 @@ import { LayoutDefaultService } from '@delon/theme/layout-default';
 @Component({
   selector: 'dev-home',
   template: `
-    <page-header [autoBreadcrumb]="false"></page-header>
+    <page-header [autoBreadcrumb]="false" />
     home
     <div class="mb-md"> options: {{ srv.options | json }} </div>
     <div class="mb-md">
diff --git a/src/dev/layout.component.ts b/src/dev/layout.component.ts
index 6afe312eeb..9b9d1a522c 100644
--- a/src/dev/layout.component.ts
+++ b/src/dev/layout.component.ts
@@ -79,7 +79,7 @@ const ICONS = [
       </layout-default-header-item>
       <ng-template #asideUserTpl>
         <div nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu" class="alain-default__aside-user">
-          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar"></nz-avatar>
+          <nz-avatar class="alain-default__aside-user-avatar" [nzSrc]="user.avatar" />
           <div class="alain-default__aside-user-info">
             <strong>{{ user.name }}</strong>
             <p class="mb0">{{ user.email }}</p>
@@ -92,10 +92,10 @@ const ICONS = [
           </ul>
         </nz-dropdown-menu>
       </ng-template>
-      <reuse-tab [mode]="2" [customContextMenu]="customContextMenu" #reuseTab></reuse-tab>
-      <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>
+      <reuse-tab [mode]="2" [customContextMenu]="customContextMenu" #reuseTab />
+      <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)" />
     </layout-default>
-    <setting-drawer></setting-drawer>
+    <setting-drawer />
   `,
   host: {
     '[class.alain-default]': 'true'
diff --git a/src/dev/lazy/layout.component.ts b/src/dev/lazy/layout.component.ts
index db01ac9bfa..7fca67e7c8 100644
--- a/src/dev/lazy/layout.component.ts
+++ b/src/dev/lazy/layout.component.ts
@@ -5,10 +5,10 @@ import { format } from 'date-fns';
 @Component({
   selector: 'dev-lazy-layout',
   template: `
-    <page-header></page-header>
+    <page-header />
     <h2>Lazy Module, {{ now | json }}</h2>
     <div class="p-lg">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   `
 })
diff --git a/src/dev/list/layout.component.ts b/src/dev/list/layout.component.ts
index 00cc710864..bcbf68b06f 100644
--- a/src/dev/list/layout.component.ts
+++ b/src/dev/list/layout.component.ts
@@ -6,12 +6,12 @@ import { format } from 'date-fns';
 @Component({
   selector: 'dev-list-layout',
   template: `
-    <page-header></page-header>
+    <page-header />
     <h1>Layout</h1>
     <p>first: {{ first | json }}，now: {{ now | json }}</p>
     <hr />
     <div class="px-lg">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   `
 })
diff --git a/src/dev/pages/page.component.ts b/src/dev/pages/page.component.ts
index 6794287a57..2c99bae464 100644
--- a/src/dev/pages/page.component.ts
+++ b/src/dev/pages/page.component.ts
@@ -6,7 +6,7 @@ import { format } from 'date-fns';
 @Component({
   selector: 'dev-page',
   template: `
-    <page-header></page-header>
+    <page-header />
     <p>first: {{ first | json }}，now: {{ now | json }}</p>
     <p>id: {{ id | json }}</p>
     page: {{ route.url | json }}