ng-alain · cipchk · Aug 2, 2023 · Aug 1, 2023 · Aug 1, 2023
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,12 @@
-<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"
     nz-tooltip
     [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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,29 +24,29 @@
         </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">
               <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,5 +6,5 @@
       </ng-container>
     </div>
   </div>
-  <ng-content></ng-content>
+  <ng-content />
 </div>