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

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

@@ -1,9 +1,11 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 @Component({
   selector: 'app-styleguide-component-params',
   templateUrl: './styleguide-component-params.component.html',
+  imports: [StyleguideSpecimenComponent]
 })
 export class StyleguideComponentParamsComponent implements OnInit {
   @Input() rendering: ComponentRendering;
@@ -13,8 +15,6 @@ export class StyleguideComponentParamsComponent implements OnInit {
   columns: number;
   columnsArray: number[];
 
-  constructor() { }
-
   ngOnInit() {
     this.cssClass = this.rendering.params.cssClass;
     this.useCta = this.rendering.params.useCallToAction;

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

@@ -1,22 +1,22 @@
-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, LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-styleguide-custom-route-type',
   templateUrl: './styleguide-custom-route-type.component.html',
+  imports: [JssModule]
 })
 export class StyleguideCustomRouteTypeComponent 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) => {
+    this.contextSubscription = this.jssContext.state.subscribe((state: LayoutServiceData) => {
       this.contextFields = state.sitecore.route.fields;
     });
   }

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

@@ -12,9 +12,13 @@
     <br/>
     <p [ngStyle]="{'color': (applyRed ? 'red': 'blue')}">This text will change color. Use the field edit button to change its appearance</p>
     This list can be changed via field editor:
-    <ul>
-      <li *ngFor="let contentItem of rendering.fields.sampleList">{{contentItem.fields.title?.value}}</li>
-    </ul>
+    @if (sampleListKeys.length > 0) {
+      <ul>
+        @for (key of sampleListKeys; track key) {
+          <li>{{rendering.fields.sampleList[key].fields.title?.value}}</li>
+        }
+      </ul>
+    }
     <ng-content></ng-content>
   </sc-edit-frame>
 </app-styleguide-specimen>

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

@@ -1,4 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
   ComponentRendering,
   EditFrameDataSource,
@@ -6,9 +7,11 @@ import {
   getFieldValue,
   LayoutServiceContextData,
   RouteData,
-  WebEditButton
+  WebEditButton,
+  JssModule
 } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 interface EditFrameProps {
   dataSource: EditFrameDataSource;
@@ -28,6 +31,7 @@ interface EditFrameProps {
 @Component({
   selector: 'app-styleguide-edit-frame',
   templateUrl: './styleguide-edit-frame.component.html',
+  imports: [CommonModule, JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideEditFrameComponent implements OnInit {
   @Input() rendering: ComponentRendering;
@@ -38,6 +42,7 @@ export class StyleguideEditFrameComponent implements OnInit {
   editFrameProps: EditFrameProps;
 
   applyRed: boolean;
+  sampleListKeys: string[] = [];
   
   editFrameButtons = [
     {
@@ -53,8 +58,7 @@ export class StyleguideEditFrameComponent implements OnInit {
       tooltip: 'Allows you to open field editor for specified fields',
     }, // or use field edit buttons to open Field Editor
   ];
-
-  constructor(private jssContext: JssContextService) { }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     this.jssContext.state.subscribe((state) => {
@@ -62,6 +66,11 @@ export class StyleguideEditFrameComponent implements OnInit {
     });
     this.applyRed = getFieldValue<number>(this.rendering, 'applyRedToText') ? true: false;
     this.editFrameProps = this.getEditFrameProps(this.rendering.dataSource);
+    
+    const sampleList = this.rendering?.fields?.sampleList;
+    if (sampleList && Array.isArray(sampleList)) {
+      this.sampleListKeys = sampleList.map((_, index) => index.toString());
+    }
   }
 
   getEditFrameProps(dataSource?: string) {

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-checkbox/styleguide-field-usage-checkbox.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a Checkbox (boolean) content field within JSS.
@@ -7,14 +8,13 @@ import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-an
 @Component({
   selector: 'app-styleguide-field-usage-checkbox',
   templateUrl: './styleguide-field-usage-checkbox.component.html',
+  imports: [StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageCheckboxComponent implements OnInit {
   @Input() rendering: ComponentRendering;
   checkbox1Value: boolean;
   checkbox2Value: boolean;
 
-  constructor() { }
-
   ngOnInit() {
     /*
       The getFieldValue helper allows safely extracting a field value that could be undefined,

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-content-list/styleguide-field-usage-content-list.component.html

@@ -5,22 +5,26 @@
   So we can use the .map() array function to traverse them. Ensure a `key` attribute is set
   on each element to make React's DOM updating happy:
   -->
-  <ng-container *ngIf="rendering.fields.sharedContentList">
-    <div *ngFor="let listItem of rendering.fields.sharedContentList">
-      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
-      <p>
-        Field: <span *scText="listItem.fields.textField"></span>
-      </p>
-    </div>
-  </ng-container>
+  @if (sharedContentListKeys.length > 0) {
+    @for (key of sharedContentListKeys; track key) {
+      <div>
+        <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
+        <p>
+          Field: <span *scText="rendering.fields.sharedContentList[key].fields.textField"></span>
+        </p>
+      </div>
+    }
+  }
 
   <h5>Local Content List</h5>
-  <ng-container *ngIf="rendering.fields.localContentList">
-    <div *ngFor="let listItem of rendering.fields.localContentList">
-      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
-      <p>
-        Field: <span *scText="listItem.fields.textField"></span>
-      </p>
-    </div>
-  </ng-container>
+  @if (localContentListKeys.length > 0) {
+    @for (key of localContentListKeys; track key) {
+      <div>
+        <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
+        <p>
+          Field: <span *scText="rendering.fields.localContentList[key].fields.textField"></span>
+        </p>
+      </div>
+    }
+  }
 </app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-content-list/styleguide-field-usage-content-list.component.ts

@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a Content List field type within JSS.
@@ -9,7 +11,22 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-content-list',
   templateUrl: './styleguide-field-usage-content-list.component.html',
+  imports: [CommonModule, JssModule, StyleguideSpecimenComponent]
 })
-export class StyleguideFieldUsageContentListComponent {
+export class StyleguideFieldUsageContentListComponent implements OnInit {
   @Input() rendering: ComponentRendering;
+  sharedContentListKeys: string[] = [];
+  localContentListKeys: string[] = [];
+
+  ngOnInit() {
+    const sharedList = this.rendering?.fields?.sharedContentList;
+    if (sharedList && Array.isArray(sharedList)) {
+      this.sharedContentListKeys = sharedList.map((_, index) => index.toString());
+    }
+    
+    const localList = this.rendering?.fields?.localContentList;
+    if (localList && Array.isArray(localList)) {
+      this.localContentListKeys = localList.map((_, index) => index.toString());
+    }
+  }
 }

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-custom/styleguide-field-usage-custom.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a custom content field type within JSS.
@@ -9,6 +10,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-custom',
   templateUrl: './styleguide-field-usage-custom.component.html',
+  imports: [StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageCustomComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-date/styleguide-field-usage-date.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { CommonModule } from '@angular/common';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of date and time content field types within JSS.
@@ -10,6 +12,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-date',
   templateUrl: './styleguide-field-usage-date.component.html',
+  imports: [CommonModule, JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageDateComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-file/styleguide-field-usage-file.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-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';
 
 /**
  * Demonstrates usage of a File content field within JSS.
@@ -8,6 +9,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-file',
   templateUrl: './styleguide-field-usage-file.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageFileComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-image/styleguide-field-usage-image.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-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';
 
 /**
  * Demonstrates usage of an Image content field within JSS.
@@ -8,6 +9,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-image',
   templateUrl: './styleguide-field-usage-image.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageImageComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-item-link/styleguide-field-usage-item-link.component.html

@@ -1,17 +1,17 @@
 <app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-itemlink">
   <h5>Shared Item Link</h5>
   <!-- Item link fields are returned with their value as the referenced item value. -->
-  <ng-container *ngIf="rendering.fields.sharedItemLink">
+  @if (rendering.fields.sharedItemLink) {
     <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
     <p>
       Field: <span *scText="rendering.fields.sharedItemLink.fields.textField"></span>
     </p>
-  </ng-container>
+  }
 
   <h5>Local Item Link</h5>
-  <ng-container *ngIf="rendering.fields.localItemLink">
+  @if (rendering.fields.localItemLink) {
     <p>
       Field: <span *scText="rendering.fields.localItemLink.fields.textField"></span>
     </p>
-  </ng-container>
+  }
 </app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-item-link/styleguide-field-usage-item-link.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
-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';
+import { CommonModule } from '@angular/common';
 
 /**
  * Demonstrates usage of a Content Link content field within JSS.
@@ -8,6 +10,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-item-link',
   templateUrl: './styleguide-field-usage-item-link.component.html',
+  imports: [CommonModule, JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageItemLinkComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-link/styleguide-field-usage-link.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-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';
 
 /**
  * Demonstrates usage of a General Link (hyperlink) content field within JSS.
@@ -7,6 +8,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-link',
   templateUrl: './styleguide-field-usage-link.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageLinkComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-number/styleguide-field-usage-number.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a Number (decimal) content field within JSS.
@@ -7,6 +8,7 @@ import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-an
 @Component({
   selector: 'app-styleguide-field-usage-number',
   templateUrl: './styleguide-field-usage-number.component.html',
+  imports: [StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageNumberComponent implements OnInit {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-rich-text/styleguide-field-usage-rich-text.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-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';
 
 /**
  * Demonstrates usage of a Rich Text (HTML) content field within JSS.
@@ -7,6 +8,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-field-usage-rich-text',
   templateUrl: './styleguide-field-usage-rich-text.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageRichTextComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-text/styleguide-field-usage-text.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, getFieldValue, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { StyleguideSpecimenComponent } from '../shared/styleguide-specimen/styleguide-specimen.component';
 
 /**
  * Demonstrates usage of a Text content field within JSS.
@@ -8,6 +9,7 @@ import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-an
 @Component({
   selector: 'app-styleguide-field-usage-text',
   templateUrl: './styleguide-field-usage-text.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideFieldUsageTextComponent implements OnInit {
   @Input() rendering: ComponentRendering;

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

@@ -6,15 +6,19 @@
     ></sc-placeholder>
   </div>
   <div class="col-sm-4 col-lg-2 order-sm-first pt-2">
-    <nav *ngFor="let section of navigation" class="nav flex-column pt-2">
-      <a [href]="'/styleguide#' + section.id" class="nav-item fw-bold">
-        {{ section.heading }}
-      </a>
-      <nav *ngFor="let topic of section.children" class="nav flex-column">
-        <a [href]="'/styleguide#' + topic.id">
-          {{ topic.heading }}
+    @for (section of navigation; track section.id) {
+      <nav class="nav flex-column pt-2">
+        <a [href]="'/styleguide#' + section.id" class="nav-item fw-bold">
+          {{ section.heading }}
         </a>
+        @for (topic of section.children; track topic.id) {
+          <nav class="nav flex-column">
+            <a [href]="'/styleguide#' + topic.id">
+              {{ topic.heading }}
+            </a>
+          </nav>
+        }
       </nav>
-    </nav>
+    }
   </div>
 </div>

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

@@ -1,6 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ComponentRendering, getFieldValue } from '@sitecore-jss/sitecore-jss-angular';
-import { getChildPlaceholder } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, getFieldValue, getChildPlaceholder, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 interface StyleguideNavigationData {
   heading: string;
@@ -19,13 +18,12 @@ interface StyleguideNavigationData {
 @Component({
   selector: 'app-styleguide-layout',
   templateUrl: './styleguide-layout.component.html',
+  imports: [JssModule]
 })
 export class StyleguideLayoutComponent implements OnInit {
   @Input() rendering: ComponentRendering;
   navigation: StyleguideNavigationData[];
 
-  constructor() {}
-
   ngOnInit() {
     // this code reads the components in the child placeholders of this component,
     // and projects them into the left navigation column for the styleguide

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

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-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';
 
 /**
  * Demonstrates how to reuse content within JSS. See /data/routes/styleguide/en.yml
@@ -10,6 +11,7 @@ import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 @Component({
   selector: 'app-styleguide-layout-reuse',
   templateUrl: './styleguide-layout-reuse.component.html',
+  imports: [JssModule, StyleguideSpecimenComponent]
 })
 export class StyleguideLayoutReuseComponent {
   @Input() rendering: ComponentRendering;

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

@@ -3,19 +3,23 @@
     When the page is editing, we hide the tab headings, because they are not updated when xEditor adds or removes a tab rendering.
     Instead, we show the tab header inline with the tab contents (see styleguide-layout-tabs-tab).
   -->
-  <ul class="nav nav-tabs" *ngIf="!isEditing">
-    <li class="nav-item" *ngFor="let tab of tabs">
-      <a
-        [ngClass]="{ 'nav-link': true, active: tab === activeTab }"
-        (click)="activeTab = tab; (false)"
-        href="#"
-      >
-        <span *scText="tab.fields.title"></span>
-      </a>
-    </li>
-  </ul>
+  @if (!isEditing) {
+    <ul class="nav nav-tabs">
+      @for (tab of tabs; track tab) {
+        <li class="nav-item">
+          <a
+            [ngClass]="{ 'nav-link': true, active: tab === activeTab }"
+            (click)="activeTab = tab; (false)"
+            href="#"
+          >
+            <span *scText="tab.fields.title"></span>
+          </a>
+        </li>
+      }
+    </ul>
+  }
   <div class="p-3 border-left border-right border-bottom">
-    <ng-container *ngIf="isEditing">
+    @if (isEditing) {
       <!--
         When experience editor is active we want to render all tabs in a stack,
         to simplify editing.
@@ -24,14 +28,13 @@
         name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs"
         [rendering]="rendering"
       ></sc-placeholder>
-    </ng-container>
-    <ng-container *ngIf="!isEditing">
+    } @else {
       <!--
         We only want to render the _active_ tab when we're not editing.
         sc-render-component renders a _single_ component given its data,
         allowing us to partially render the placeholder contents.
       -->
       <sc-render-component [rendering]="activeTab"></sc-render-component>
-    </ng-container>
+    }
   </div>
 </app-styleguide-specimen>

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');