update Angular template syntax

Author: VasilyStrelyaev

packages/devextreme-schematics/src/add-layout/files/src/app/__name__.html

@@ -1,4 +1,5 @@
-<ng-container *ngIf="isAuthenticated(); else unauthenticated">
+@if (isAuthenticated()) {
+<ng-container>
   <app-<%= layout %> title="{{appInfo.title}}">
     <router-outlet></router-outlet>
     <app-footer>
@@ -8,7 +9,8 @@
     </app-footer>
   </app-<%= layout %>>
 </ng-container>
-
-<ng-template #unauthenticated>
+} @else {
+<ng-template>
   <app-unauthenticated-content></app-unauthenticated-content>
 </ng-template>
+}

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.html

@@ -11,13 +11,13 @@
   <app-side-navigation-menu
     [compactMode]="!menuOpened"
     [selectedItem]="selectedRoute"
-    [ngClass]="swatchClassName"
+    [class]="swatchClassName"
     *dxTemplate="let dataMenu of 'panel'"
     (selectedItemChanged)="navigationChanged($event)"
     (openMenu)="navigationClick()">
       <dx-toolbar id="navigation-header">
+        @if (minMenuSize !== 0) {
         <dxi-toolbar-item
-          *ngIf="minMenuSize !== 0"
           location="before"
           cssClass="menu-button"
           widget="dxButton"
@@ -27,6 +27,7 @@
             onClick: toggleMenu
           }">
         </dxi-toolbar-item>
+        }
         <dxi-toolbar-item
           location="before"
           cssClass="header-title"

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.html

@@ -18,7 +18,7 @@
   <app-side-navigation-menu
     [compactMode]="!menuOpened"
     [selectedItem]="selectedRoute"
-    [ngClass]="swatchClassName"
+    [class]="swatchClassName"
     *dxTemplate="let dataMenu of 'panel'"
     (selectedItemChanged)="navigationChanged($event)"
     (openMenu)="navigationClick()">

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.html

@@ -23,10 +23,13 @@
     <ng-container *dxTemplate="let item of 'changePasswordTemplate'">
       <div>
         <span class="dx-button-text">
-          <ng-container *ngIf="loading; else notLoading">
+          @if (loading) {
+          <ng-container>
             <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
           </ng-container>
-          <ng-template #notLoading>Continue</ng-template>
+          } @else {
+          <ng-template>Continue</ng-template>
+          }
         </span>
       </div>
     </ng-container>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.html

@@ -37,11 +37,13 @@
     <ng-container *dxTemplate="let item of 'createAccountTemplate'">
       <div>
         <span class="dx-button-text">
-          <ng-container *ngIf="loading; else notLoading">
+          @if (loading) {
+          <ng-container>
             <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
           </ng-container>
-
-          <ng-template #notLoading>Create a new account</ng-template>
+          } @else {
+          <ng-template>Create a new account</ng-template>
+          }
         </span>
       </div>
     </ng-container>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/header/header.component.html

@@ -1,7 +1,7 @@
 <header>
   <dx-toolbar class="header-toolbar">
+    @if (menuToggleEnabled) {
     <dxi-toolbar-item
-      *ngIf="menuToggleEnabled"
       location="before"
       widget="dxButton"
       cssClass="menu-button"
@@ -11,18 +11,20 @@
         onClick: toggleMenu
       }">
     </dxi-toolbar-item>
+    }
+    @if (title) {
     <dxi-toolbar-item
       location="before"
       cssClass="header-title"
-      *ngIf="title"
       [text]="title">
     </dxi-toolbar-item>
+    }
     <dxi-toolbar-item
       location="after"
     >
-      <ng-container *dxTemplate>
+      <div *dxTemplate>
         <theme-switcher></theme-switcher>
-      </ng-container>
+      </div>
     </dxi-toolbar-item>
     <dxi-toolbar-item
       location="after"

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.html

@@ -27,10 +27,13 @@
     <ng-container *dxTemplate="let item of 'signInTemplate'">
       <div>
         <span class="dx-button-text">
-          <ng-container *ngIf="loading; else notLoading">
+          @if (loading) {
+          <ng-container>
             <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
           </ng-container>
-          <ng-template #notLoading>Sign In</ng-template>
+          } @else {
+          <ng-template>Sign In</ng-template>
+          }
         </span>
       </div>
     </ng-container>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.html

@@ -17,10 +17,13 @@
     <ng-container *dxTemplate="let item of 'resetPasswordTemplate'">
       <div>
         <span class="dx-button-text">
-          <ng-container *ngIf="loading; else notLoading">
+          @if (loading) {
+          <ng-container>
             <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
           </ng-container>
-          <ng-template #notLoading>Reset my password</ng-template>
+          } @else {
+          <ng-template>Reset my password</ng-template>
+          }
         </span>
       </div>>
     </ng-container>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.html

@@ -1,6 +1,6 @@
 <div class="user-panel">
+  @if (menuMode !== 'list') {
   <dx-drop-down-button
-    *ngIf="menuMode !== 'list'"
     stylingMode="text"
     [icon]="'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'"
     [showArrowIcon]="false"
@@ -10,11 +10,12 @@
     [elementAttr]="{class: 'user-button'}"
     [dropDownOptions]="{width: '150px'}">
   </dx-drop-down-button>
+  } @else {
   <dx-list
-    *ngIf="menuMode === 'list'"
     displayExpr="text"
     keyExpr="id"
     width="130"
     [items]="menuItems">
   </dx-list>
+  }
 </div>