docs: migrate to new control flow (NG-ZORRO#8695)

* docs: migrate to new control flow * Update app.component.html * Update header.component.html --------- Co-authored-by: Laffery <49607541+Laffery@users.noreply.github.com>
Laffery · Aug 16, 2024 · 75a4e92 · 75a4e92
1 parent 91927bc
commit 75a4e92
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 49 deletions.
diff --git a/scripts/site/_site/doc/app/app.component.html b/scripts/site/_site/doc/app/app.component.html
@@ -10,23 +10,24 @@
     ></app-header>
     <div class="main-wrapper">
       <div nz-row>
-        <div
-          nz-col
-          *ngIf="!showDrawer"
-          [nzXs]="24"
-          [nzSm]="24"
-          [nzMd]="6"
-          [nzLg]="6"
-          [nzXl]="5"
-          [nzXXl]="4"
-          class="main-menu"
-        >
-          <nz-affix [nzOffsetTop]="0">
-            <section class="main-menu-inner">
-              <ng-template [ngTemplateOutlet]="sideOrDrawerTpl"></ng-template>
-            </section>
-          </nz-affix>
-        </div>
+        @if (!showDrawer) {
+          <div
+            nz-col
+            [nzXs]="24"
+            [nzSm]="24"
+            [nzMd]="6"
+            [nzLg]="6"
+            [nzXl]="5"
+            [nzXXl]="4"
+            class="main-menu"
+          >
+            <nz-affix [nzOffsetTop]="0">
+              <section class="main-menu-inner">
+                <ng-template [ngTemplateOutlet]="sideOrDrawerTpl"></ng-template>
+              </section>
+            </nz-affix>
+          </div>
+        }
         <div
           nz-col
           class="main-container main-container-component"
@@ -68,22 +69,24 @@
   </div>
 </div>
 
-<div class="drawer-wrapper" *ngIf="showDrawer">
-  <div class="drawer drawer-left" [class.drawer-open]="isDrawerOpen">
-    <div class="drawer-mask" (click)="isDrawerOpen = false"></div>
-    <div
-      class="drawer-content-wrapper"
-      [style.transform]="isDrawerOpen ? null : 'translateX(-100%)'"
-    >
-      <div class="drawer-content">
-        <ng-container [ngTemplateOutlet]="sideOrDrawerTpl"></ng-container>
-      </div>
-      <div class="drawer-handle" (click)="isDrawerOpen = !isDrawerOpen">
-        <span class="drawer-handle-icon"></span>
+@if (showDrawer) {
+  <div class="drawer-wrapper">
+    <div class="drawer drawer-left" [class.drawer-open]="isDrawerOpen">
+      <div class="drawer-mask" (click)="isDrawerOpen = false"></div>
+      <div
+        class="drawer-content-wrapper"
+        [style.transform]="isDrawerOpen ? null : 'translateX(-100%)'"
+      >
+        <div class="drawer-content">
+          <ng-container [ngTemplateOutlet]="sideOrDrawerTpl"></ng-container>
+        </div>
+        <div class="drawer-handle" (click)="isDrawerOpen = !isDrawerOpen">
+          <span class="drawer-handle-icon"></span>
+        </div>
       </div>
     </div>
   </div>
-</div>
+}
 
 <ng-template #sideOrDrawerTpl>
   <app-side

diff --git a/scripts/site/_site/doc/app/header/header.component.html b/scripts/site/_site/doc/app/header/header.component.html
@@ -1,14 +1,15 @@
 <header id="header" class="clearfix">
-  <span
-    nz-icon
-    class="nav-phone-icon"
-    nzType="unordered-list"
-    *ngIf="isMobile"
-    nzPopoverOverlayClassName="popover-menu"
-    nzPopoverPlacement="bottomLeft"
-    nz-popover
-    [nzPopoverContent]="menu"
-  ></span>
+  @if (isMobile) {
+    <span
+      nz-icon
+      class="nav-phone-icon"
+      nzType="unordered-list"
+      nzPopoverOverlayClassName="popover-menu"
+      nzPopoverPlacement="bottomLeft"
+      nz-popover
+      [nzPopoverContent]="menu"
+    ></span>
+  }
 
   <div nz-row style="flex-flow: nowrap">
     <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6" [nzLg]="6" [nzXl]="5" [nzXXl]="4">
@@ -21,13 +22,15 @@
         [responsive]="responsive"
         (focusChange)="onFocusChange($event)"
       ></div>
-      <ng-container *ngIf="!isMobile" [ngTemplateOutlet]="menu"></ng-container>
+      @if (!isMobile) {
+        <ng-container [ngTemplateOutlet]="menu"></ng-container>
+      }
     </div>
   </div>
 </header>
 <ng-template #menu>
-  <ng-container *ngIf="!searching || windowWidth > 1200">
-    <ng-container *ngIf="windowWidth < 1120; else narrowNavigation">
+  @if (!searching || windowWidth > 1200) {
+    @if (windowWidth < 1120) {
       <ul
         nz-menu
         app-navigation
@@ -40,8 +43,7 @@
         [(language)]="language"
         (languageChange)="onChangeLanguage($event)"
       ></ul>
-    </ng-container>
-    <ng-template #narrowNavigation>
+    } @else {
       <ul
         nz-menu
         app-navigation
@@ -62,7 +64,9 @@
         (ngModelChange)="onChangeVersion($event)"
       >
         <nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion"></nz-option>
-        <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version" [nzValue]="version"></nz-option>
+        @for (version of oldVersionList; track version) {
+          <nz-option [nzLabel]="version" [nzValue]="version"></nz-option>
+        }
       </nz-select>
       <button
         nz-button
@@ -82,6 +86,6 @@
         {{ nextDirection | uppercase }}
       </button>
       <app-github-btn [responsive]="responsive"></app-github-btn>
-    </ng-template>
-  </ng-container>
-</ng-template>
+    }
+  }
+</ng-template>