create-sitecore-jss 22.10.0-canary.9 → 22.12.0-canary.1

package/dist/templates/angular-sxp/src/app/components/styleguide-layout-tabs/styleguide-layout-tabs.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { ComponentRendering, getChildPlaceholder } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, OnInit, Input, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ComponentRendering, getChildPlaceholder, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
 import { Subscription } from 'rxjs';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates advanced component techniques in JSS.
@@ -15,6 +17,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-styleguide-layout-tabs',
   templateUrl: './styleguide-layout-tabs.component.html',
+  imports: [CommonModule, JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideLayoutTabsComponent implements OnInit, OnDestroy {
   @Input() rendering: ComponentRendering;
@@ -22,8 +25,7 @@ export class StyleguideLayoutTabsComponent implements OnInit, OnDestroy {
   activeTab: ComponentRendering;
   isEditing = false;
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {}
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     // to get access to route-level data from Sitecore such as route item fields or

package/dist/templates/angular-sxp/src/app/components/styleguide-layout-tabs-tab/styleguide-layout-tabs-tab.component.html

@@ -4,9 +4,9 @@
   So we conditionally render the tab title here, when editing.
 -->
 <div data-e2e-class="styleguide-layout-tabs-tab">
-  <ng-container *ngIf="isEditing">
+  @if (isEditing) {
     <h5 *scText="rendering.fields.title"></h5>
-  </ng-container>
+  }
 
   <div *scRichText="rendering.fields.content"></div>
 </div>

package/dist/templates/angular-sxp/src/app/components/styleguide-layout-tabs-tab/styleguide-layout-tabs-tab.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, OnInit, Input, OnDestroy, inject } from '@angular/core';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
 import { Subscription } from 'rxjs';
 
@@ -11,13 +11,13 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-styleguide-layout-tabs-tab',
   templateUrl: './styleguide-layout-tabs-tab.component.html',
+  imports: [JssModule]
 })
 export class StyleguideLayoutTabsTabComponent implements OnInit, OnDestroy {
   @Input() rendering: ComponentRendering;
   isEditing = false;
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) { }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     // to get access to route-level data from Sitecore such as route item fields or

package/dist/templates/angular-sxp/src/app/components/styleguide-multilingual/styleguide-multilingual.component.ts

@@ -1,7 +1,9 @@
-import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, Input, inject } from '@angular/core';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { JssContextService } from '../../jss-context.service';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates using the dictionary functionality and defining route data in
@@ -10,6 +12,7 @@ import { JssContextService } from '../../jss-context.service';
 @Component({
   selector: 'app-styleguide-multilingual',
   templateUrl: './styleguide-multilingual.component.html',
+  imports: [JssModule, TranslateModule, StyleguideSpecimenComponent]
 })
 export class StyleguideMultilingualComponent {
   @Input() rendering: ComponentRendering;
@@ -17,7 +20,8 @@ export class StyleguideMultilingualComponent {
   LANG_REGEXP = /^\/([a-zA-Z]{2}(-[a-zA-Z]{2})?)/;
   // inject ngx-translate service to get translation state
   // (in this example, the current language)
-  constructor(public translate: TranslateService, private jssService: JssContextService) { }
+  public translate = inject(TranslateService);
+  private jssService = inject(JssContextService);
 
   switchLanguage(ev: Event) {
     const href = (ev.target as HTMLAnchorElement).getAttribute('href');

package/dist/templates/angular-sxp/src/app/components/styleguide-route-fields/styleguide-route-fields.component.ts

@@ -1,19 +1,20 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, inject } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { JssContextService } from '../../jss-context.service';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 @Component({
   selector: 'app-styleguide-route-fields',
   templateUrl: './styleguide-route-fields.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideRouteFieldsComponent implements OnInit, OnDestroy {
   @Input() rendering: ComponentRendering;
   contextFields: { [name: string]: unknown };
 
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) { }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     this.contextSubscription = this.jssContext.state.subscribe((state) => {

package/dist/templates/angular-sxp/src/app/components/styleguide-section/styleguide-section.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /**
  * Represents a category of styleguide specimens within the Styleguide-Layout.
@@ -9,6 +9,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-section',
   templateUrl: './styleguide-section.component.html',
+  imports: [JssModule]
 })
 export class StyleguideSectionComponent implements OnInit {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-sitecore-context/styleguide-sitecore-context.component.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, inject } from '@angular/core';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 import { Subscription } from 'rxjs';
 
 /**
@@ -11,19 +12,21 @@ import { Subscription } from 'rxjs';
  * NOTE: if not using async pipe, ensure you unsubscribe from the context
  * in ngOnDestroy(). See styleguide-layout-tabs for an example.
  */
+
 @Component({
   selector: 'app-styleguide-sitecore-context',
-  templateUrl: './styleguide-sitecore-context.component.html'
+  templateUrl: './styleguide-sitecore-context.component.html',
+  imports: [StyleguideSpecimenComponent]
 })
 export class StyleguideSitecoreContextComponent implements OnInit, OnDestroy {
   @Input() rendering: ComponentRendering;
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) { }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
-    this.contextSubscription = this.jssContext.state.subscribe((state) => {
+    this.contextSubscription = this.jssContext.state.subscribe((state: unknown) => {
       console.debug('The current Sitecore Context in styleguide-sitecore-context.component.ts is...', state);
     });
   }

package/dist/templates/angular-sxp/src/app/components/styleguide-tracking/styleguide-tracking.component.html

@@ -1,7 +1,10 @@
 <app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-tracking">
-  <p *ngIf="disconnectedMode">The tracking API is only available in connected, integrated, or headless modes.</p>
+  @if (disconnectedMode) {
+    <p>The tracking API is only available in connected, integrated, or headless modes.</p>
+  }
 
-  <div *ngIf="!disconnectedMode">
+  @if (!disconnectedMode) {
+  <div>
     <p class="alert alert-warning">
       Note: The JSS tracker API is disabled by default. Consult the <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">tracking documentation</a> to enable it.
     </p>
@@ -172,4 +175,5 @@
       </fieldset>
     </div>
   </div>
+  }
 </app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-tracking/styleguide-tracking.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
   ComponentRendering,
   trackingApi,
@@ -6,6 +7,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../../environments/environment';
 import { JssDataFetcherService } from '../../jss-data-fetcher.service';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a Text content field within JSS.
@@ -14,6 +16,7 @@ import { JssDataFetcherService } from '../../jss-data-fetcher.service';
 @Component({
   selector: 'app-styleguide-tracking',
   templateUrl: './styleguide-tracking.component.html',
+  imports: [CommonModule, StyleguideSpecimenComponent]
 })
 export class StyleguideTrackingComponent implements OnInit {
   @Input() rendering: ComponentRendering;
@@ -25,17 +28,14 @@ export class StyleguideTrackingComponent implements OnInit {
   pageId: string;
   pageUrl: string;
   disconnectedMode = true;
-  trackingApiOptions: TrackingRequestOptions;
-
-  constructor(dataFetcher: JssDataFetcherService) {
-    this.trackingApiOptions = {
-      host: environment.sitecoreApiHost,
-      querystringParams: {
-        sc_apikey: environment.sitecoreApiKey,
-      },
-      fetcher: dataFetcher.fetch,
-    };
-  }
+  private dataFetcher = inject(JssDataFetcherService);
+  trackingApiOptions: TrackingRequestOptions = {
+    host: environment.sitecoreApiHost,
+    querystringParams: {
+      sc_apikey: environment.sitecoreApiKey,
+    },
+    fetcher: this.dataFetcher.fetch,
+  };
 
   ngOnInit() {
     this.disconnectedMode = this.rendering.dataSource === 'available-in-connected-mode';

package/dist/templates/angular-sxp/src/app/jss-data-fetcher.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable, lastValueFrom } from 'rxjs';
@@ -7,10 +7,12 @@ import { Observable, lastValueFrom } from 'rxjs';
   providedIn: 'root',
 })
 export class JssDataFetcherService {
-  constructor(private readonly httpClient: HttpClient) {
+  constructor() {
     this.fetch = this.fetch.bind(this);
   }
 
+  protected httpClient = inject(HttpClient);
+
   fetch<T>(url: string, data: unknown): Promise<HttpResponse<T>> {
     let result: Observable<T>;
 

package/dist/templates/angular-sxp/src/app/routing/scripts/scripts.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+
+@Component({
+  selector: 'app-scripts',
+  templateUrl: './scripts.component.html',
+  imports: [VisitorIdentificationComponent]
+})
+export class ScriptsComponent {}
+

package/dist/templates/angular-sxp/src/app/routing/scripts/scripts.module.ts

@@ -3,7 +3,7 @@ import { ScriptsComponent } from './scripts.component';
 import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
 
 @NgModule({
+  imports: [ScriptsComponent, VisitorIdentificationComponent],
   exports: [ScriptsComponent],
-  declarations: [ScriptsComponent, VisitorIdentificationComponent],
 })
 export class ScriptsModule {}

package/dist/templates/angular-sxp/src/app/routing/scripts/visitor-identification/visitor-identification.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { JssContextService } from '../../../jss-context.service';
+import { JssState } from '../../../JssState';
 
 let emittedVI = false;
 
@@ -20,6 +22,7 @@ let emittedVI = false;
       [content]="visitorIdentificationTimestamp"
     />
   `,
+  imports: [CommonModule]
 })
 export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   visitorIdentificationTimestamp: number;
@@ -27,10 +30,10 @@ export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) {}
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
-    this.contextSubscription = this.jssContext.state.subscribe((state) => {
+    this.contextSubscription = this.jssContext.state.subscribe((state: JssState) => {
       if (state.sitecore && state.sitecore.context) {
         if (
           !emittedVI &&

package/dist/templates/angular-xmcloud/scripts/generate-component-factory/template.ts

@@ -29,6 +29,7 @@ export const components = [
 @NgModule({
   imports: [
     AppComponentsSharedModule,
+    ${declarations.join('\n    ')} // Standalone components
     JssModule.withComponents([
       ${registrations.join('\n      ')}
     ], [
@@ -49,9 +50,6 @@ export const components = [
     JssModule,
     AppComponentsSharedModule,
   ],
-  declarations: [
-    ${declarations.join('\n    ')}
-  ],
 })
 export class AppComponentsModule { }
 `;

package/dist/templates/angular-xmcloud/src/app/components/app-components.shared.module.ts

@@ -14,8 +14,7 @@ import { NavigationItemComponent } from './navigation/navigation-item.component'
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
+  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule, NavigationItemComponent],
   exports: [CommonModule, TranslateModule, RouterModule, FormsModule, NavigationItemComponent],
-  declarations: [NavigationItemComponent],
 })
 export class AppComponentsSharedModule {}

package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html

@@ -1,5 +1,7 @@
-<div *ngFor="let ph of enabledPlaceholders" [ngClass]="getColumnClass(+ph - 1)">
-  <div class="row">
-    <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+@for (ph of enabledPlaceholders; track ph) {
+  <div [ngClass]="getColumnClass(+ph - 1)">
+    <div class="row">
+      <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+    </div>
   </div>
-</div>
+}

package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts

@@ -1,9 +1,12 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-column-splitter',
   templateUrl: './column-splitter.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     'class': 'row component column-splitter',
     '[class]': 'columnSplitterStyles',

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.html

@@ -1,7 +1,16 @@
-<div class="container-wrapper" *ngIf="wrapped; else default">
-  <ng-container *ngTemplateOutlet="default"></ng-container>
-</div>
-<ng-template #default>
+@if (wrapped) {
+  <div class="container-wrapper">
+    <div class="component container-default {{ styles }}" [attr.id]="id">
+      <div class="component-content" [ngStyle]="backgroundStyle">
+          <sc-placeholder
+            [name]="placeholderName"
+            [rendering]="rendering"
+            class="row">
+          </sc-placeholder>
+      </div>
+    </div>
+  </div>
+} @else {
   <div class="component container-default {{ styles }}" [attr.id]="id">
     <div class="component-content" [ngStyle]="backgroundStyle">
         <sc-placeholder
@@ -11,4 +20,4 @@
         </sc-placeholder>
     </div>
   </div>
-</ng-template>
+}

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-container',
   templateUrl: './container.component.html',
+  imports: [CommonModule, JssModule],
 })
 export class ContainerComponent extends SxaComponent implements OnInit {
   placeholderName: string;

package/dist/templates/angular-xmcloud/src/app/components/image/image.component.html

@@ -1,36 +1,34 @@
 <ng-container [ngTemplateOutlet]="variant"></ng-container>
 
 <ng-template #default>
-  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
-    <div class="component-content">
-      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
-        <img *scImage="rendering.fields.Image" />
-      </ng-container>
-      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
+  @if (rendering.fields) {
+    <div class="component image {{ styles }}" [attr.id]="id">
+      <div class="component-content">
+        @if (isEditing || !rendering.fields.TargetUrl?.value?.href) {
+          <img *scImage="rendering.fields.Image" />
+        } @else {
+          <a *scGenericLink="rendering.fields.TargetUrl">
+            <img *scImage="rendering.fields.Image" />
+          </a>
+        }
+        <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
+      </div>
     </div>
-  </div>
+  } @else {
+    <div class="component image {{ styles }}">
+      <div class="component-content">
+        <span class="is-empty-hint">Image</span>
+      </div>
+    </div>
+  }
 </ng-template>
 
 <ng-template #banner>
   <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
     <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
-      <ng-container *ngIf="isEditing">
+      @if (isEditing) {
         <img *scImage="modifyImageProps" />
-      </ng-container>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #withLink>
-  <a *scGenericLink="rendering.fields.TargetUrl">
-    <img *scImage="rendering.fields.Image" />
-  </a>
-</ng-template>
-
-<ng-template #empty>
-  <div class="component image {{ styles }}">
-    <div class="component-content">
-      <span class="is-empty-hint">Image</span>
+      }
     </div>
   </div>
 </ng-template>

package/dist/templates/angular-xmcloud/src/app/components/image/image.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, TemplateRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { Subscription } from 'rxjs';
 import { EditMode, ImageField } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
@@ -7,6 +9,7 @@ import { JssContextService } from '../../jss-context.service';
 @Component({
   selector: 'app-image',
   templateUrl: './image.component.html',
+  imports: [CommonModule, JssModule],
 })
 export class ImageComponent extends SxaComponent implements OnInit, OnDestroy {
   @ViewChild('default', { static: true }) defaultVariant: TemplateRef<any>;
@@ -16,10 +19,7 @@ export class ImageComponent extends SxaComponent implements OnInit, OnDestroy {
   modifyImageProps = {};
   isEditing = false;
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     super.ngOnInit();

package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html

@@ -1,15 +1,16 @@
 <div class="component-content">
-  <ng-container *ngIf="title; else defaultTitle">
+  @if (title) {
     <h3 *scText="title"></h3>
-  </ng-container>
+  } @else {
+    <span class="is-empty-hint">Link list</span>
+  }
   <ul>
-    <li *ngFor="let fieldLink of fieldLinks; index as i" [ngClass]="getFieldLinkClass(i)">
-      <div class="field-link">
-        <a *scGenericLink="fieldLink"></a>
-      </div>
-    </li>
+    @for (fieldLink of fieldLinks; track $index) {
+      <li [ngClass]="getFieldLinkClass($index)">
+        <div class="field-link">
+          <a *scGenericLink="fieldLink"></a>
+        </div>
+      </li>
+    }
   </ul>
 </div>
-<ng-template #defaultTitle>
-  <span class="is-empty-hint">Link list</span>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-link-list',
   templateUrl: './link-list.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     'class': 'component link-list',
     '[class]': 'styles',

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.html

@@ -1,23 +1,20 @@
 <li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
   <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
     <a *scRouterLink="linkField" (click)="onClick($event)">
-      <ng-container *ngIf="navItemFields.NavigationTitle"
-        ><span *scText="navItemFields.NavigationTitle"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && navItemFields.Title">
-        <span *scText="navItemFields.Title"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && !navItemFields.Title">{{
-        navItemFields.DisplayName
-      }}</ng-container>
+      @if (navItemFields.NavigationTitle) {
+        <span *scText="navItemFields.NavigationTitle"></span>
+      } @else if (navItemFields.Title) {
+        <span *scText="navItemFields.Title"></span>
+      } @else {
+        {{ navItemFields.DisplayName }}
+      }
     </a>
   </div>
-  <ul *ngIf="hasChildren" class="clearfix">
-    <app-navigation-item
-      *ngFor="let childNavItemFields of navItemFields.Children"
-      [navItemFields]="childNavItemFields"
-      [relativeLevel]="childrenRelativeLevel"
-      (childLinkClickEvent)="onClick($event)"
-    ></app-navigation-item>
-  </ul>
+  @if (hasChildren) {
+    <ul class="clearfix">
+      @for (childNavItemFields of navItemFields.Children; track childNavItemFields.Id) {
+        <app-navigation-item [navItemFields]="childNavItemFields" [relativeLevel]="childrenRelativeLevel" (childLinkClickEvent)="onClick($event)"></app-navigation-item>
+      }
+    </ul>
+  }
 </li>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-import { LinkField } from '@sitecore-jss/sitecore-jss-angular';
+import { CommonModule } from '@angular/common';
+import { LinkField, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { Field } from '@sitecore-jss/sitecore-jss-angular';
 
 export interface NavItemFields {
@@ -16,6 +17,7 @@ export interface NavItemFields {
 @Component({
   selector: 'app-navigation-item',
   templateUrl: './navigation-item.component.html',
+  imports: [CommonModule, JssModule]
 })
 export class NavigationItemComponent implements OnInit {
   @Input() navItemFields: NavItemFields;
@@ -27,8 +29,6 @@ export class NavigationItemComponent implements OnInit {
   childrenRelativeLevel = 0;
   hasChildren = false;
 
-  constructor() {}
-
   ngOnInit() {
     this.cssClasses = `${this.navItemFields.Styles.concat('rel-level' + this.relativeLevel).join(
       ' '

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html

@@ -9,12 +9,9 @@
   <div class="component-content">
     <nav>
       <ul class="clearfix">
-        <app-navigation-item
-          *ngFor="let navItemFields of rendering.fields"
-          [navItemFields]="navItemFields"
-          [relativeLevel]="baseLevel"
-          (childLinkClickEvent)="toggleMenu($event, false)"
-        ></app-navigation-item>
+        @for (navItemFields of fieldKeys; track $index) {
+          <app-navigation-item [navItemFields]="rendering.fields[navItemFields]" [relativeLevel]="baseLevel" (childLinkClickEvent)="toggleMenu($event, false)"></app-navigation-item>
+        }
       </ul>
     </nav>
   </div>