@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -19,7 +19,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
+      declarations: [],
       imports: [
         FormsModule,
         BrowserAnimationsModule,
@@ -31,7 +31,8 @@ describe('<%=ClassName%>Component', () => {
         IgxSwitchModule,
         IgxInputGroupModule,
         IgxSparklineModule,
-        IgxSparklineCoreModule
+        IgxSparklineCoreModule,
+        <%=ClassName%>Component
       ]
     })
     .compileComponents();

package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -6,8 +6,8 @@ import {
   Inject,
   OnDestroy,
   OnInit,
-  ViewChild
-  } from '@angular/core';
+  ViewChild,
+} from '@angular/core';
 import {
   AbsolutePosition,
   CellType,
@@ -18,15 +18,48 @@ import {
   IgxStringFilteringOperand,
   IgxSummaryResult,
   OverlayClosingEventArgs,
-  OverlaySettings
-  } from '<%=igxPackage%>';
-import { SparklineDisplayType } from 'igniteui-angular-charts';
+  OverlaySettings,
+  IgxSwitchComponent,
+  IgxInputGroupComponent,
+  IgxInputDirective,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxAvatarComponent,
+  IgxBadgeComponent,
+  IgxCircularProgressBarComponent,
+} from '<%=igxPackage%>';
+import {
+  SparklineDisplayType,
+  IgxSparklineCoreModule,
+} from 'igniteui-angular-charts';
 import { Athlete, AthletesData, SpeedEntry } from './services/data';
+import { NgIf, NgClass, NgFor, DecimalPipe } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxInputGroupComponent,
+    IgxInputDirective,
+    IgxGridComponent,
+    IgxPaginatorComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    NgIf,
+    IgxAvatarComponent,
+    IgxBadgeComponent,
+    IgxSparklineCoreModule,
+    IgxCircularProgressBarComponent,
+    NgClass,
+    NgFor,
+    DecimalPipe,
+  ],
 })
 export class <%=ClassName%>Component implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('grid1', { read: IgxGridComponent, static: true })

package/igx-ts/custom-templates/awesome-grid/index.js

@@ -10,29 +10,6 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.listInCustomTemplates = true;
         this.name = "Awesome Grid";
         this.description = "Awesome IgxGrid";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            {
-                import: [
-                    "IgxProgressBarModule",
-                    "IgxIconModule",
-                    "IgxAvatarModule",
-                    "IgxBadgeModule",
-                    "IgxSwitchModule",
-                    "IgxInputGroupModule",
-                    "IgxButtonModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            {
-                import: [
-                    "IgxSparklineModule",
-                    "IgxSparklineCoreModule"
-                ],
-                from: "igniteui-angular-charts"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
         this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
     }
 }

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -25,7 +25,6 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component ],
       imports: [
         FormsModule,
         BrowserAnimationsModule,
@@ -41,7 +40,8 @@ describe('<%=ClassName%>Component', () => {
         IgxToggleModule,
         IgxCheckboxModule,
         IgxSparklineModule,
-        IgxSparklineCoreModule
+        IgxSparklineCoreModule,
+        <%=ClassName%>Component
       ],
       providers: [IgxExcelExporterService, IgxCsvExporterService]
     })

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -4,7 +4,7 @@ import {
   AfterViewInit,
   QueryList,
   ViewChild,
-  ElementRef
+  ElementRef,
 } from '@angular/core';
 
 import {
@@ -23,14 +23,59 @@ import {
   IgxToggleDirective,
   OverlaySettings,
   PositionSettings,
-  VerticalAlignment} from '<%=igxPackage%>';
-import { SparklineDisplayType } from 'igniteui-angular-charts';
+  VerticalAlignment,
+  IgxGridToolbarComponent,
+  IgxGridToolbarTitleComponent,
+  IgxInputGroupComponent,
+  IgxPrefixDirective,
+  IgxIconComponent,
+  IgxInputDirective,
+  IgxSuffixDirective,
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarPinningComponent,
+  IgxGridToolbarExporterComponent,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxAvatarComponent,
+  IgxLinearProgressBarComponent,
+} from '<%=igxPackage%>';
+import { SparklineDisplayType, IgxSparklineCoreModule } from 'igniteui-angular-charts';
 import { DATA, DealsDescriptor, Employee } from './data';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarTitleComponent,
+    IgxInputGroupComponent,
+    IgxPrefixDirective,
+    NgIf,
+    IgxIconComponent,
+    ReactiveFormsModule,
+    IgxInputDirective,
+    FormsModule,
+    IgxSuffixDirective,
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarPinningComponent,
+    IgxGridToolbarExporterComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxAvatarComponent,
+    IgxLinearProgressBarComponent,
+    IgxSparklineCoreModule,
+  ]
 })
 export class <%=ClassName%>Component implements OnInit, AfterViewInit {
 

package/igx-ts/custom-templates/crm-grid/index.js

@@ -10,39 +10,6 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
         this.listInCustomTemplates = true;
         this.name = "CRM Grid";
         this.description = "CRM IgxGrid";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            {
-                provide: [
-                    "IgxCsvExporterService",
-                    "IgxExcelExporterService"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            {
-                import: [
-                    "IgxAvatarModule",
-                    "IgxBadgeModule",
-                    "IgxButtonModule",
-                    "IgxIconModule",
-                    "IgxInputGroupModule",
-                    "IgxProgressBarModule",
-                    "IgxRippleModule",
-                    "IgxSwitchModule",
-                    "IgxToggleModule",
-                    "IgxCheckboxModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            {
-                import: [
-                    "IgxSparklineModule",
-                    "IgxSparklineCoreModule"
-                ],
-                from: "igniteui-angular-charts"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
         this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
     }
 }

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -11,10 +11,18 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component ],
-      imports: [ FormsModule, BrowserAnimationsModule,
-        IgxGridModule, IgxDialogModule, IgxCategoryChartModule,
-        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule ]
+		imports: [
+		  FormsModule,
+		  BrowserAnimationsModule,
+		  IgxGridModule,
+		  IgxDialogModule,
+		  IgxCategoryChartModule,
+		  IgxButtonModule,
+		  IgxSwitchModule,
+		  IgxSliderModule,
+		  IgxCheckboxModule,
+		  <%=ClassName%>Component,
+		]
     })
     .compileComponents();
   }));

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,4 +1,12 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {
   CellType,
   DefaultSortingStrategy,
@@ -11,19 +19,70 @@ import {
   IgxGridComponent,
   IgxSliderComponent,
   IRowSelectionEventArgs,
-  SortingDirection
+  SortingDirection,
+  IgxSwitchComponent,
+  IgxGridToolbarComponent,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarPinningComponent,
+  IgxGridToolbarExporterComponent,
+  IgxColumnComponent,
+  IgxCellEditorTemplateDirective,
+  IgxSelectComponent,
+  IgxFocusDirective,
+  IgxSelectItemComponent,
+  IgxCellTemplateDirective,
+  IgxIconComponent,
+  IgxButtonDirective,
+  IgxDialogTitleDirective,
+  IgxDialogActionsDirective,
 } from '<%=igxPackage%>';
-import { CategoryChartType, IgxCategoryChartComponent } from 'igniteui-angular-charts';
+import {
+  CategoryChartType,
+  IgxCategoryChartComponent,
+  IgxCategoryChartCoreModule,
+} from 'igniteui-angular-charts';
 import { timer } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { LocalDataService } from './localData.service';
 import { Contract, REGIONS } from './localData/financialData';
+import { NgIf, NgFor, CurrencyPipe } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   providers: [LocalDataService],
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxSliderComponent,
+    IgxButtonGroupComponent,
+    NgIf,
+    IgxGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarPinningComponent,
+    IgxGridToolbarExporterComponent,
+    IgxColumnComponent,
+    IgxCellEditorTemplateDirective,
+    IgxSelectComponent,
+    IgxFocusDirective,
+    NgFor,
+    IgxSelectItemComponent,
+    IgxCellTemplateDirective,
+    IgxIconComponent,
+    IgxButtonDirective,
+    IgxDialogComponent,
+    IgxDialogTitleDirective,
+    IgxCategoryChartCoreModule,
+    IgxDialogActionsDirective,
+    CurrencyPipe,
+  ]
 })
 export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('grid1', { static: true }) public grid1!: IgxGridComponent;

package/igx-ts/custom-templates/fintech-grid/index.js

@@ -10,26 +10,6 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.listInCustomTemplates = true;
         this.name = "FinTech Grid";
         this.description = "Grid with simulated high-frequency data feed";
-        this.dependencies = [
-            { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" },
-            { provide: "IgxExcelExporterService", from: "<%=igxPackage%>" },
-            {
-                import: [
-                    "IgxButtonGroupModule",
-                    "IgxDialogModule",
-                    "IgxFocusModule",
-                    "IgxGridModule",
-                    "IgxIconModule",
-                    "IgxRippleModule",
-                    "IgxSelectModule",
-                    "IgxSliderModule",
-                    "IgxSwitchModule",
-                    "IgxToggleModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
         this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
     }
 }

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -11,7 +11,6 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component, <%=ClassName%>TreeGridGroupingPipe ],
       imports: [
         FormsModule,
         BrowserAnimationsModule,
@@ -19,7 +18,10 @@ describe('<%=ClassName%>Component', () => {
         IgxCheckboxModule,
         IgxButtonModule,
         IgxSliderModule,
-        IgxSwitchModule]
+        IgxSwitchModule,
+        <%=ClassName%>Component,
+        <%=ClassName%>TreeGridGroupingPipe
+      ]
     })
       .compileComponents();
   }));

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,6 +1,11 @@
 import {
   Component,
-  AfterViewInit, ElementRef, OnDestroy, OnInit, ViewChild, NgZone
+  AfterViewInit,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  NgZone,
 } from '@angular/core';
 import {
   AbsoluteScrollStrategy,
@@ -15,18 +20,49 @@ import {
   OverlaySettings,
   PositionSettings,
   SortingDirection,
-  VerticalAlignment
+  VerticalAlignment,
+  IgxSwitchComponent,
+  IgxGridToolbarComponent,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarExporterComponent,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxIconComponent,
+  IgxTreeGridGroupingPipe,
 } from '<%=igxPackage%>';
 import { timer } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { LocalDataService } from './localData.service';
-import { ITreeGridAggregation } from './tree-grid-grouping.pipe';
+import { ITreeGridAggregation, <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
+import { NgIf, CurrencyPipe } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   providers: [LocalDataService],
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxSliderComponent,
+    IgxButtonGroupComponent,
+    NgIf,
+    IgxTreeGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarExporterComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxIconComponent,
+    CurrencyPipe,
+    IgxTreeGridGroupingPipe,
+    <%=ClassName%>TreeGridGroupingPipe
+  ]
 })
 export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent;

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/tree-grid-grouping.pipe.ts

@@ -13,7 +13,8 @@ export class ITreeGridAggregation {
 
 @Pipe({
   name: 'treeGridGrouping',
-  pure: true
+  pure: true,
+  standalone: true
 })
 export class <%=ClassName%>TreeGridGroupingPipe implements PipeTransform {
 

package/igx-ts/custom-templates/fintech-tree-grid/index.js

@@ -10,22 +10,6 @@ class IgxTreeGridFinTechTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFo
         this.listInCustomTemplates = true;
         this.name = "FinTech Tree Grid";
         this.description = "This sample demonstrates the TreeGrid handling thousands of updates per second.";
-        this.dependencies = [
-            { import: "IgxTreeGridModule", from: "<%=igxPackage%>" },
-            { provide: "IgxExcelExporterService", from: "<%=igxPackage%>" },
-            {
-                import: [
-                    "IgxButtonGroupModule",
-                    "IgxCheckboxModule",
-                    "IgxIconModule",
-                    "IgxSwitchModule",
-                    "IgxSliderModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            { import: "FormsModule", from: "@angular/forms" },
-            { declare: "<%=ClassName%>TreeGridGroupingPipe", from: "./src/app/<%=path%>/tree-grid-grouping.pipe.ts" }
-        ];
     }
 }
 module.exports = new IgxTreeGridFinTechTemplate();

package/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
 import { IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule } from '<%=igxPackage%>';
@@ -17,8 +18,21 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [ ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule ]
+      imports: [
+        ReactiveFormsModule,
+        RouterTestingModule,
+        NoopAnimationsModule,
+        IgxInputGroupModule,
+        IgxButtonModule,
+        IgxIconModule,
+        IgxRippleModule,
+        <%=ClassName%>Component,
+      ],
+      providers: [
+        { provide: ExternalAuthService, useValue: extAuthSpy },
+        { provide: AuthenticationService, useValue: authSpy },
+        { provide: UserService, useValue: userServSpy },
+      ],
     })
       .compileComponents();
   }));

package/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,13 +1,39 @@
-import {Component} from '@angular/core';
-import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { NgIf } from '@angular/common';
+import {
+  IgxInputGroupComponent,
+  IgxPrefixDirective,
+  IgxIconComponent,
+  IgxLabelDirective,
+  IgxInputDirective,
+  IgxButtonDirective,
+  IgxRippleDirective,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    IgxInputGroupComponent,
+    IgxPrefixDirective,
+    IgxIconComponent,
+    IgxLabelDirective,
+    IgxInputDirective,
+    IgxButtonDirective,
+    IgxRippleDirective,
+    NgIf
+  ]
 })
-
-  export class <%=ClassName%>Component {
+export class <%=ClassName%>Component {
   public loginForm: FormGroup;
   public registrationForm: FormGroup;
   public showLogin = true;

package/igx-ts/custom-templates/login/index.js

@@ -10,13 +10,6 @@ class IgxLoginTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTe
         this.listInCustomTemplates = true;
         this.name = "Login view";
         this.description = "Login view";
-        this.dependencies = [{
-                import: ["IgxInputGroupModule", "IgxIconModule", "IgxButtonModule", "IgxRippleModule"],
-                from: "<%=igxPackage%>"
-            }, {
-                import: ["ReactiveFormsModule"],
-                from: "@angular/forms"
-            }];
     }
 }
 module.exports = new IgxLoginTemplate();

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -13,13 +13,13 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
       imports: [
         BrowserAnimationsModule,
         IgxButtonModule,
         IgxCardModule,
         IgxExpansionPanelModule,
-        IgxIconModule
+        IgxIconModule,
+        <%=ClassName%>Component
       ]
     })
     .compileComponents();

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,14 +1,37 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxExpansionPanelComponent } from '<%=igxPackage%>';
+import {
+  IgxExpansionPanelComponent,
+  IgxCardComponent,
+  IgxCardHeaderComponent,
+  IgxCardContentDirective,
+  IgxIconComponent,
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxExpansionPanelBodyComponent,
+} from '<%=igxPackage%>';
 import { data as weatherData } from './weather-data';
+import { NgIf, NgFor, NgClass } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardContentDirective,
+    NgIf,
+    IgxIconComponent,
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxExpansionPanelComponent,
+    IgxExpansionPanelBodyComponent,
+    NgFor,
+    NgClass
+  ]
 })
 export class <%=ClassName%>Component {
-
   @ViewChild(IgxExpansionPanelComponent, { static: true })
   public panel!: IgxExpansionPanelComponent;
   public data = weatherData;

package/igx-ts/custom-templates/weather-forecast/index.js

@@ -10,17 +10,6 @@ class IgxWeatherForecastTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFo
         this.listInCustomTemplates = true;
         this.name = "Weather Forecast";
         this.description = "Weather Forecast";
-        this.dependencies = [
-            {
-                import: [
-                    "IgxButtonModule",
-                    "IgxCardModule",
-                    "IgxExpansionPanelModule",
-                    "IgxIconModule"
-                ],
-                from: "<%=igxPackage%>"
-            }
-        ];
     }
 }
 module.exports = new IgxWeatherForecastTemplate();