generator-jhipster 8.0.0-rc.1 → 8.1.0

package/dist/generators/angular/templates/src/main/webapp/app/home/home.component.html.ejs

@@ -26,23 +26,27 @@
 
     <p class="lead" <%= jhiPrefix %>Translate="home.subtitle">__jhiTransformTranslate__('home.subtitle')</p>
 
-    <div [ngSwitch]="account !== null">
-      <div class="alert alert-success" *ngSwitchCase="true">
-        <span id="home-logged-message" *ngIf="account" <%= jhiPrefix %>Translate="home.logged.message"
-          [translateValues]="{ username: account.login }">__jhiTransformTranslate__('home.logged.message', { "username": "{{ account.login }}" })</span>
-      </div>
-
-      <div class="alert alert-warning" *ngSwitchCase="false">
-        <span <%= jhiPrefix %>Translate="global.messages.info.authenticated.prefix">__jhiTransformTranslate__('global.messages.info.authenticated.prefix')</span>
-        <a class="alert-link" (click)="login()" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link">__jhiTransformTranslate__('global.messages.info.authenticated.link')</a><span <%= jhiPrefix %>Translate="global.messages.info.authenticated.suffix">__jhiTransformTranslate__('global.messages.info.authenticated.suffix')</span>
-      </div>
-      <%_ if (generateUserManagement) { _%>
-
-      <div class="alert alert-warning" *ngSwitchCase="false">
-        <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount">__jhiTransformTranslate__('global.messages.info.register.noaccount')</span>&nbsp;
-        <a class="alert-link" routerLink="/account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link">__jhiTransformTranslate__('global.messages.info.register.link')</a>
-      </div>
-      <%_ } _%>
+    <div>
+      @if (account !== null) {
+        <div class="alert alert-success">
+        @if (account) {
+          <span id="home-logged-message" <%= jhiPrefix %>Translate="home.logged.message"
+            [translateValues]="{ username: account.login }">__jhiTransformTranslate__('home.logged.message', { "username": "{{ account.login }}" })</span>
+        }
+        </div>
+      } @else {
+        <div class="alert alert-warning">
+          <span <%= jhiPrefix %>Translate="global.messages.info.authenticated.prefix">__jhiTransformTranslate__('global.messages.info.authenticated.prefix')</span>
+          <a class="alert-link" (click)="login()" <%= jhiPrefix %>Translate="global.messages.info.authenticated.link">__jhiTransformTranslate__('global.messages.info.authenticated.link')</a><span <%= jhiPrefix %>Translate="global.messages.info.authenticated.suffix">__jhiTransformTranslate__('global.messages.info.authenticated.suffix')</span>
+        </div>
+        <%_ if (generateUserManagement) { _%>
+
+          <div class="alert alert-warning">
+            <span <%= jhiPrefix %>Translate="global.messages.info.register.noaccount">__jhiTransformTranslate__('global.messages.info.register.noaccount')</span>&nbsp;
+            <a class="alert-link" routerLink="/account/register" <%= jhiPrefix %>Translate="global.messages.info.register.link">__jhiTransformTranslate__('global.messages.info.register.link')</a>
+          </div>
+        <%_ } _%>
+      }
     </div>
 
     <p <%= jhiPrefix %>Translate="home.question">__jhiTransformTranslate__('home.question')</p>

package/dist/generators/angular/templates/src/main/webapp/app/home/home.component.ts.ejs

@@ -39,7 +39,7 @@ import { Account } from 'app/core/auth/account.model';
   standalone: true,
   selector: '<%= jhiPrefixDashed %>-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss'],
+  styleUrl: './home.component.scss',
   imports: [SharedModule, RouterModule],
 })
 export default class HomeComponent implements OnInit<% if (!authenticationTypeOauth2) { %>, OnDestroy<% } %> {

package/dist/generators/angular/templates/src/main/webapp/app/layouts/error/error.component.html.ejs

@@ -25,9 +25,9 @@
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="error.title">__jhiTransformTranslate__('error.title')</h1>
 
-      <div *ngIf="errorMessage">
-        <div class="alert alert-danger">{{ errorMessage }}</div>
-      </div>
+    @if (errorMessage) {
+      <div class="alert alert-danger">{{ errorMessage }}</div>
+    }
     </div>
   </div>
 </div>

package/dist/generators/angular/templates/src/main/webapp/app/layouts/main/main.component.spec.ts.ejs

@@ -55,10 +55,13 @@ describe('MainComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [
 <%_ if (enableTranslation) { _%>
-        imports: [TranslateModule.forRoot(), RouterTestingModule],
+          TranslateModule.forRoot(),
+          RouterTestingModule,
 <%_ } _%>
-        declarations: [MainComponent],
+          MainComponent,
+        ],
         providers: [
           Title,
 <%_ if (enableI18nRTL) { _%>

package/dist/generators/angular/templates/src/main/webapp/app/layouts/main/main.component.ts.ejs

@@ -17,6 +17,7 @@
  limitations under the License.
 -%>
 import { Component, OnInit<% if (enableTranslation) { %>, RendererFactory2, Renderer2<% } %> } from '@angular/core';
+import { RouterOutlet, Router } from '@angular/router';
 <%_ if (enableTranslation) { _%>
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import dayjs from 'dayjs/esm';
@@ -24,15 +25,18 @@ import dayjs from 'dayjs/esm';
 
 import { AccountService } from 'app/core/auth/account.service';
 import { AppPageTitleStrategy } from 'app/app-page-title-strategy';
-import { Router } from '@angular/router';
 <%_ if (enableI18nRTL) { _%>
 import FindLanguageFromKeyPipe from 'app/shared/language/find-language-from-key.pipe';
 <%_ } _%>
+import FooterComponent from '../footer/footer.component';
+import PageRibbonComponent from '../profiles/page-ribbon.component';
 
 @Component({
   selector: '<%= jhiPrefixDashed %>-main',
+  standalone: true,
   templateUrl: './main.component.html',
   providers: [AppPageTitleStrategy],
+  imports: [RouterOutlet, FooterComponent, PageRibbonComponent],
 })
 export default class MainComponent implements OnInit {
 <%_ if (enableTranslation) { _%>

package/dist/generators/angular/templates/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs

@@ -35,7 +35,7 @@
   >
     <fa-icon icon="bars"></fa-icon>
   </a>
-  <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="account !== null">
+  <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed">
     <ul class="navbar-nav ms-auto">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
         <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
@@ -46,47 +46,52 @@
         </a>
       </li>
       <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
-      <li
-        *ngSwitchCase="true"
-        ngbDropdown
-        class="nav-item dropdown pointer"
-        display="dynamic"
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
-      >
-        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
-          <span>
-            <fa-icon icon="th-list"></fa-icon>
-            <span <%= jhiPrefix %>Translate="global.menu.entities.main">__jhiTransformTranslate__('global.menu.entities.main')</span>
-          </span>
-        </a>
-        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
+      @if (account !== null) {
+        <li
+          ngbDropdown
+          class="nav-item dropdown pointer"
+          display="dynamic"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >
+          <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
+            <span>
+              <fa-icon icon="th-list"></fa-icon>
+              <span <%= jhiPrefix %>Translate="global.menu.entities.main">__jhiTransformTranslate__('global.menu.entities.main')</span>
+            </span>
+          </a>
+          <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
 <%_ if (applicationTypeGateway && microfrontend) { _%>
   <%_ for (const remote of microfrontends) { _%>
-          <li *ngIf="<%= remote.lowercaseBaseName %>EntityNavbarItems.length === 0">
-            <span class="dropdown-item">Failed to load <%= remote.lowercaseBaseName %> entities</span>
-          </li>
-          <li *ngFor="let entityNavbarItem of <%= remote.lowercaseBaseName %>EntityNavbarItems">
-            <a
-              class="dropdown-item"
-              [routerLink]="entityNavbarItem.route"
-              routerLinkActive="active"
-              [routerLinkActiveOptions]="{ exact: true }"
-              (click)="collapseNavbar()"
-            >
-              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
-              <span
+          @if (<%= remote.lowercaseBaseName %>EntityNavbarItems.length === 0) {
+            <li>
+              <span class="dropdown-item">Failed to load <%= remote.lowercaseBaseName %> entities</span>
+            </li>
+          }
+          @for (entityNavbarItem of <%= remote.lowercaseBaseName %>EntityNavbarItems; track $index) {
+            <li>
+              <a
+                class="dropdown-item"
+                [routerLink]="entityNavbarItem.route"
+                routerLinkActive="active"
+                [routerLinkActiveOptions]="{ exact: true }"
+                (click)="collapseNavbar()"
+              >
+                <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
+                <span
     <%_ if (enableTranslation) { _%>
-              [<%= jhiPrefix %>Translate]="entityNavbarItem.translationKey"
+               [<%= jhiPrefix %>Translate]="entityNavbarItem.translationKey"
     <%_ } _%>
-              >{{entityNavbarItem.name}}</span>
-            </a>
-          </li>
+                >{{entityNavbarItem.name}}</span>
+              </a>
+            </li>
+        }
   <%_ } _%>
 <%_ } _%>
-          <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
-        </ul>
-      </li>
+            <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
+          </ul>
+        </li>
+      }
       <li
         *<%= jhiPrefix %>HasAnyAuthority="'ROLE_ADMIN'"
         ngbDropdown
@@ -153,26 +158,31 @@
           </li>
 <%_ } _%>
 <%_ if (!applicationTypeMicroservice) { _%>
-          <li *ngIf="openAPIEnabled">
+        @if (openAPIEnabled) {
+          <li>
             <a class="dropdown-item" routerLink="/admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="book" [fixedWidth]="true"></fa-icon>
               <span <%= jhiPrefix %>Translate="global.menu.admin.apidocs">__jhiTransformTranslate__('global.menu.admin.apidocs')</span>
             </a>
           </li>
+        }
 <%_ } _%>
           <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
 <%_ if (devDatabaseTypeH2Any || databaseTypeCouchbase) { _%>
-          <li *ngIf="!inProduction">
+        @if (!inProduction) {
+          <li>
             <a class="dropdown-item" href="<% if (databaseTypeCouchbase) { %>http://localhost:8091/<% } else if (reactive) { %> http://localhost:8092/ <% } else { %>./h2-console/<% } %>" target="_tab" (click)="collapseNavbar()">
               <fa-icon icon="database" [fixedWidth]="true"></fa-icon>
               <span <%= jhiPrefix %>Translate="global.menu.admin.database">__jhiTransformTranslate__('global.menu.admin.database')</span>
             </a>
           </li>
+        }
 <%_ } _%>
         </ul>
       </li>
 <%_ if (enableTranslation) { _%>
-      <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" *ngIf="languages && languages.length > 1">
+    @if (languages && languages.length > 1) {
+      <li ngbDropdown class="nav-item dropdown pointer" display="dynamic">
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
           <span>
             <fa-icon icon="flag"></fa-icon>
@@ -180,65 +190,74 @@
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
-          <li *ngFor="let language of languages">
+        @for (language of languages; track $index) {
+          <li>
             <a class="dropdown-item" [<%= jhiPrefix %>ActiveMenu]="language" href="javascript:void(0);" (click)="changeLanguage(language);collapseNavbar();">{{ language | findLanguageFromKey }}</a>
           </li>
+        }
         </ul>
       </li>
+    }
 <%_ } _%>
       <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu" data-cy="accountMenu">
-          <span *ngIf="!account?.imageUrl">
+        @if (!account?.imageUrl) {
+          <span>
             <fa-icon icon="user"></fa-icon>
             <span <%= jhiPrefix %>Translate="global.menu.account.main">__jhiTransformTranslate__('global.menu.account.main')</span>
           </span>
-          <span *ngIf="account?.imageUrl">
+        } @else {
+          <span>
             <img [src]="account!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
           </span>
+        }
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="account-menu">
+          @if (account !== null) {
 <%_ if (generateUserManagement) { _%>
-          <li *ngSwitchCase="true">
-            <a class="dropdown-item" routerLink="/account/settings" routerLinkActive="active" (click)="collapseNavbar()" data-cy="settings">
-              <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.settings">__jhiTransformTranslate__('global.menu.account.settings')</span>
-            </a>
-          </li>
-          <li *ngSwitchCase="true">
-            <a class="dropdown-item" routerLink="/account/password" routerLinkActive="active" (click)="collapseNavbar()" data-cy="passwordItem">
-              <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.password">__jhiTransformTranslate__('global.menu.account.password')</span>
-            </a>
-          </li>
+            <li>
+              <a class="dropdown-item" routerLink="/account/settings" routerLinkActive="active" (click)="collapseNavbar()" data-cy="settings">
+                <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.settings">__jhiTransformTranslate__('global.menu.account.settings')</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" routerLink="/account/password" routerLinkActive="active" (click)="collapseNavbar()" data-cy="passwordItem">
+                <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.password">__jhiTransformTranslate__('global.menu.account.password')</span>
+              </a>
+            </li>
 <%_ } _%>
 <%_ if (authenticationTypeSession && generateUserManagement) { _%>
-          <li *ngSwitchCase="true">
-            <a class="dropdown-item" routerLink="/account/sessions" routerLinkActive="active" (click)="collapseNavbar()">
-              <fa-icon icon="cloud" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.sessions">__jhiTransformTranslate__('global.menu.account.sessions')</span>
-            </a>
-          </li>
+            <li>
+              <a class="dropdown-item" routerLink="/account/sessions" routerLinkActive="active" (click)="collapseNavbar()">
+                <fa-icon icon="cloud" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.sessions">__jhiTransformTranslate__('global.menu.account.sessions')</span>
+              </a>
+            </li>
 <%_ } _%>
-          <li *ngSwitchCase="true">
-            <a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
-              <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.logout">__jhiTransformTranslate__('global.menu.account.logout')</span>
-            </a>
-          </li>
-          <li *ngSwitchCase="false">
-            <a class="dropdown-item" (click)="login()" id="login" data-cy="login">
-              <fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.login">__jhiTransformTranslate__('global.menu.account.login')</span>
-            </a>
-          </li>
+            <li>
+              <a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
+                <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.logout">__jhiTransformTranslate__('global.menu.account.logout')</span>
+              </a>
+            </li>
+          } @else {
+            <li>
+              <a class="dropdown-item" (click)="login()" id="login" data-cy="login">
+                <fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.login">__jhiTransformTranslate__('global.menu.account.login')</span>
+              </a>
+            </li>
 <%_ if (generateUserManagement) { _%>
-          <li *ngSwitchCase="false">
-            <a class="dropdown-item" routerLink="/account/register" routerLinkActive="active" (click)="collapseNavbar()" data-cy="register">
-              <fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
-              <span <%= jhiPrefix %>Translate="global.menu.account.register">__jhiTransformTranslate__('global.menu.account.register')</span>
-            </a>
-          </li>
+            <li>
+              <a class="dropdown-item" routerLink="/account/register" routerLinkActive="active" (click)="collapseNavbar()" data-cy="register">
+                <fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
+                <span <%= jhiPrefix %>Translate="global.menu.account.register">__jhiTransformTranslate__('global.menu.account.register')</span>
+              </a>
+            </li>
 <%_ } _%>
+          }
         </ul>
       </li>
     </ul>

package/dist/generators/angular/templates/src/main/webapp/app/layouts/navbar/navbar.component.scss.ejs

@@ -67,6 +67,6 @@ Logo styles
   width: 45px;
   display: inline-block;
   vertical-align: middle;
-  background: url('../../../content/images/logo-jhipster.png') no-repeat center center;
+  background: url('/content/images/logo-jhipster.png') no-repeat center center;
   background-size: contain;
 }

package/dist/generators/angular/templates/src/main/webapp/app/layouts/navbar/navbar.component.ts.ejs

@@ -44,7 +44,7 @@ import NavbarItem from './navbar-item.model';
   standalone: true,
   selector: '<%= jhiPrefixDashed %>-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
+  styleUrl: './navbar.component.scss',
   imports: [
     RouterModule,
     SharedModule,

package/dist/generators/angular/templates/src/main/webapp/app/layouts/profiles/page-ribbon.component.scss.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 /* ==========================================================================
-Developement Ribbon
+Development Ribbon
 ========================================================================== */
 .ribbon {
   background-color: rgba(170, 0, 0, 0.5);

package/dist/generators/angular/templates/src/main/webapp/app/layouts/profiles/page-ribbon.component.ts.ejs

@@ -27,11 +27,13 @@ import { ProfileService } from './profile.service';
   standalone: true,
   selector: '<%= jhiPrefixDashed %>-page-ribbon',
   template: `
-    <div class="ribbon" *ngIf="ribbonEnv$ | async as ribbonEnv">
-      <a href=""<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.ribbon.{{ ribbonEnv }}"<% } %>>{{ __jhiTransformTranslateStringify__('global.ribbon')[ribbonEnv] || '' }}</a>
-    </div>
+    @if (ribbonEnv$ | async; as ribbonEnv) {
+      <div class="ribbon">
+        <a href=""<% if (enableTranslation) { %> <%= jhiPrefix %>Translate="global.ribbon.{{ ribbonEnv }}"<% } %>>{{ __jhiTransformTranslateStringify__('global.ribbon')[ribbonEnv] || '' }}</a>
+      </div>
+    }
   `,
-  styleUrls: ['./page-ribbon.component.scss'],
+  styleUrl: './page-ribbon.component.scss',
   imports: [SharedModule],
 })
 export default class PageRibbonComponent implements OnInit {

package/dist/generators/angular/templates/src/main/webapp/app/login/login.component.html.ejs

@@ -20,12 +20,12 @@
   <div class="d-flex justify-content-center">
     <div class="col-lg-6 col-md-8 col-sm-10">
       <h1 <%= jhiPrefix %>Translate="login.title" data-cy="loginTitle">__jhiTransformTranslate__('login.title')</h1>
-      <div
-        class="alert alert-danger"
-        *ngIf="authenticationError"
+    @if (authenticationError) {
+      <div class="alert alert-danger"
         <%= jhiPrefix %>Translate="login.messages.error.authentication"
         data-cy="loginError"
       >__jhiTransformTranslate__('login.messages.error.authentication')</div>
+    }
       <form class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
         <div class="mb-3">
           <label class="username-label" for="username" <%= jhiPrefix %>Translate="global.form.username.label">__jhiTransformTranslate__('global.form["username.label"]')</label>

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.html.ejs

@@ -17,9 +17,13 @@
  limitations under the License.
 -%>
 <div class="alerts" role="alert">
-  <div *ngFor="let alert of alerts" [ngClass]="setClasses(alert)">
-    <ngb-alert *ngIf="alert.message" [type]="alert.type" (closed)="close(alert)">
+@for (alert of alerts; track $index) {
+  <div [ngClass]="setClasses(alert)">
+  @if (alert.message) {
+    <ngb-alert [type]="alert.type" (closed)="close(alert)">
       <pre [innerHTML]="alert.message"></pre>
     </ngb-alert>
+  }
   </div>
+}
 </div>

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert.component.html.ejs

@@ -17,9 +17,13 @@
  limitations under the License.
 -%>
 <div class="alerts" role="alert">
-  <div *ngFor="let alert of alerts" [ngClass]="setClasses(alert)">
-    <ngb-alert *ngIf="alert.message" [type]="alert.type" (closed)="close(alert)">
+@for (alert of alerts; track $index) {
+  <div [ngClass]="setClasses(alert)">
+  @if (alert.message) {
+    <ngb-alert [type]="alert.type" (closed)="close(alert)">
       <pre [innerHTML]="alert.message"></pre>
     </ngb-alert>
+  }
   </div>
+}
 </div>

package/dist/generators/angular/templates/src/main/webapp/app/shared/filter/filter.component.html.ejs

@@ -1,12 +1,16 @@
-<div class="filter-display" *ngIf="filters.hasAnyFilterSet()">
+@if (filters.hasAnyFilterSet()) {
+<div class="filter-display">
   <span <%= jhiPrefix %>Translate="entity.filters.set">__jhiTransformTranslate__('entity.filters.set')</span>
   <fa-icon icon="times" (click)="clearAllFilters()" title="<% if (enableTranslation) { %>{{ 'entity.filters.clearAll' | translate }}<% } else { %>__jhiTransformTranslate__('entity.filters.clearAll')<% } %>"></fa-icon>
   <ul>
-    <ng-container *ngFor="let filterOption of filters.filterOptions">
-      <li *ngFor="let value of filterOption.values">
-        <span>{{ filterOption.name }}:</span> {{ value }}
-        <fa-icon icon="times" (click)="clearFilter(filterOption.name, value)" title="<% if (enableTranslation) { %>{{ 'entity.filters.clear' | translate }}<% } else { %>__jhiTransformTranslate__('entity.filters.clear')<% } %>"></fa-icon>
-      </li>
-    </ng-container>
+@for (filterOption of filters.filterOptions; track filterOption.name) {
+  @for (value of filterOption.values; track value) {
+    <li>
+      <span>{{ filterOption.name }}:</span> {{ value }}
+      <fa-icon icon="times" (click)="clearFilter(filterOption.name, value)" title="<% if (enableTranslation) { %>{{ 'entity.filters.clear' | translate }}<% } else { %>__jhiTransformTranslate__('entity.filters.clear')<% } %>"></fa-icon>
+    </li>
+  }
+}
   </ul>
 </div>
+}

package/dist/generators/angular/templates/src/main/webapp/app/shared/filter/filter.model.spec.ts.ejs

@@ -75,7 +75,7 @@ describe('FilterModel Tests', () => {
     });
 
     describe('clear', () => {
-      it("removes empty filters and dosn't emit next element", () => {
+      it("removes empty filters and doesn't emit next element", () => {
         const filters = new FilterOptions([new FilterOption('foo'), new FilterOption('bar')]);
         jest.spyOn(filters.filterChanges, 'next');
 

package/dist/generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs

@@ -30,7 +30,7 @@ import SortDirective from './sort.directive';
     <table>
       <thead>
         <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="transition($event)">
-          <th <%= jhiPrefix %>SortBy="name">ID<fa-icon *ngIf="sortAllowed" [icon]="'sort'"></fa-icon></th>
+          <th <%= jhiPrefix %>SortBy="name">ID@if (sortAllowed) {<fa-icon [icon]="'sort'"></fa-icon>}</th>
         </tr>
       </thead>
     </table>
@@ -55,8 +55,8 @@ describe('Directive: SortByDirective', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [SortDirective, SortByDirective],
-      declarations: [TestSortByDirectiveComponent, FaIconComponent],
+      imports: [SortDirective, SortByDirective, FaIconComponent],
+      declarations: [TestSortByDirectiveComponent],
     });
     fixture = TestBed.createComponent(TestSortByDirectiveComponent);
     component = fixture.componentInstance;

package/dist/generators/angular/templates/src/main/webapp/bootstrap.ts.ejs

@@ -17,18 +17,18 @@
  limitations under the License.
 -%>
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import AppComponent from './app/app.component';
 
 import { DEBUG_INFO_ENABLED } from './app/app.constants';
-import { AppModule } from './app/app.module';
 
 // disable debug data on prod profile to improve performance
 if (!DEBUG_INFO_ENABLED) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, { preserveWhitespaces: true })
+bootstrapApplication(AppComponent, appConfig)
   // eslint-disable-next-line no-console
   .then(() => console.log('Application started'))
-  .catch(err => console.error(err));
+  .catch((err) => console.error(err));

package/dist/generators/angular/templates/src/main/webapp/content/scss/global.scss.ejs

@@ -36,7 +36,7 @@ h4 {
 }
 
 <%_ if (clientThemeNone) { _%>
-/* Increase contrast of links to get 100% on Lighthouse Accessability Audit. Override this color if you want to change the link color, or use a Bootswatch theme */
+/* Increase contrast of links to get 100% on Lighthouse Accessibility Audit. Override this color if you want to change the link color, or use a Bootswatch theme */
 a {
   color: #533f03;
   font-weight: bold;