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

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxDatePickerModule, NoopAnimationsModule]
+	  imports: [IgxDatePickerModule, NoopAnimationsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,13 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxDatePickerComponent } from '<%=igxPackage%>';;
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
   encapsulation: ViewEncapsulation.Emulated,
+  standalone: true,
+  imports: [IgxLayoutDirective, IgxDatePickerComponent],
 })
 export class <%=ClassName%>Component {
   public today: Date = new Date(Date.now());

package/igx-ts/date-picker/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxDatePickerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,9 +12,7 @@ class IgxDatePickerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
         this.projectType = "igx-ts";
         this.name = "Date Picker";
         this.description = "basic IgxDatePicker";
-        this.dependencies = [
-            { import: "IgxDatePickerModule", from: "<%=igxPackage%>" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxDatePickerTemplate();

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [ IgxDialogModule, NoopAnimationsModule]
+	  imports: [IgxDialogModule, NoopAnimationsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { IDialogEventArgs } from '<%=igxPackage%>';
+import { IDialogEventArgs, IgxButtonDirective, IgxDialogComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxButtonDirective, IgxDialogComponent]
 })
-
 export class <%=ClassName%>Component {
   dialogOKSelected(args: IDialogEventArgs) {
     args.dialog.close();

package/igx-ts/dialog/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxDialogTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxDialogTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularT
         this.projectType = "igx-ts";
         this.name = "Dialog";
         this.description = "Standart dialog template";
-        this.dependencies = [{
-                import: ["IgxDialogModule", "IgxButtonModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxDialogTemplate();

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -12,9 +12,8 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [CommonModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+	  imports: [CommonModule, <%=ClassName%>Component],
+	  schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
   }));

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,17 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   IgcDockManagerLayout,
   IgcDockManagerPaneType,
   IgcSplitPaneOrientation
 } from '<%=dockManagerPackage%>';
+import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
+
+defineCustomElements();
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class <%=ClassName%>Component {
-
   public layout: IgcDockManagerLayout = {
     rootPane: {
       type: IgcDockManagerPaneType.splitPane,

package/igx-ts/dock-manager/default/index.js

@@ -12,9 +12,6 @@ class IgcDockManagerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Dock Manager";
         this.description = "basic IgcDockManager";
-        this.dependencies = [
-            { import: "<%=ClassName%>Module", from: "./src/app/<%=path%>/<%=filePrefix%>.module.ts" }
-        ];
         // "igniteui-dockmanager@~1.0.0":
         this.packages = [`${(0, package_resolve_1.resolveIgxPackage)(package_resolve_1.NPM_DOCK_MANAGER)}@~1.8.0`];
     }

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [ IgxDropDownModule, NoopAnimationsModule, IgxToggleModule]
+	  imports: [IgxDropDownModule, NoopAnimationsModule, IgxToggleModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,29 @@
 import { Component } from '@angular/core';
 import { Country, data } from './local-data';
+import {
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxToggleActionDirective,
+  IgxDropDownItemNavigationDirective,
+  IgxDropDownComponent,
+  IgxDropDownItemComponent,
+} from '<%=igxPackage%>';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxToggleActionDirective,
+    IgxDropDownItemNavigationDirective,
+    IgxDropDownComponent,
+    NgFor,
+    IgxDropDownItemComponent,
+  ]
 })
 
 export class <%=ClassName%>Component {

package/igx-ts/dropdown/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxDropDownTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxDropDownTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngula
         this.projectType = "igx-ts";
         this.name = "Drop Down";
         this.description = "Basic IgxDropDown sample";
-        this.dependencies = [{
-                import: ["IgxDropDownModule", "IgxButtonModule", "IgxToggleModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxDropDownTemplate();

package/igx-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -8,8 +8,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxFinancialChartModule]
+	  imports: [IgxFinancialChartModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { AMZNData, Stock } from './data';
+import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxFinancialChartModule]
 })
 export class <%=ClassName%>Component {
   public data: Stock[] = AMZNData;

package/igx-ts/financial-chart/default/index.js

@@ -10,9 +10,6 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.id = "financial-chart";
         this.projectType = "igx-ts";
         this.name = "Financial Chart";
-        this.dependencies = [
-            { import: "IgxFinancialChartModule", from: "igniteui-angular-charts" }
-        ];
         this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
     }
 }

package/igx-ts/generate/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -7,8 +7,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxCarouselModule]
+      imports: [IgxCarouselModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/generate/files/src/app/__path__/__filePrefix__.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: "<%=filePrefix%>",
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true
 })
 export class <%=ClassName%>Component {
   title = '<%=name%>';

package/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [NoopAnimationsModule, IgxGridModule]
+	  imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>Component]
     })
     .compileComponents();
   }));

package/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { ColumnType } from '<%=igxPackage%>';
+import { ColumnType, IgxGridComponent, IgxPaginatorComponent } from '<%=igxPackage%>';
 import { Employee, employeesData } from './localData';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxGridComponent, IgxPaginatorComponent]
 })
 export class <%=ClassName%>Component implements OnInit {
   public localData: Employee[] = [];

package/igx-ts/grid/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,9 +12,7 @@ class IgxGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTem
         this.projectType = "igx-ts";
         this.name = "Grid";
         this.description = "basic IgxGrid";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxGridTemplate();

package/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -16,8 +16,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [ FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule ]
+	  imports: [FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule, <%=ClassName%>Component]
     })
     .compileComponents();
   }));

package/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,11 +1,37 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxDialogComponent, IgxGridComponent, State, Transaction, TransactionService } from '<%=igxPackage%>';
+import {
+  IgxDialogComponent,
+  IgxGridComponent,
+  State,
+  Transaction,
+  TransactionService,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxButtonDirective,
+  IgxCellEditorTemplateDirective,
+  IgxFocusDirective,
+  IgxRippleDirective,
+} from '<%=igxPackage%>';
 import { data, Product } from './data';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  templateUrl: './<%=filePrefix%>.component.html'
+  templateUrl: './<%=filePrefix%>.component.html',
+  standalone: true,
+  imports: [
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxButtonDirective,
+    IgxCellEditorTemplateDirective,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxFocusDirective,
+    IgxRippleDirective,
+    IgxDialogComponent
+  ]
 })
 export class <%=ClassName%>Component implements OnInit {
   @ViewChild('gridRowEditTransaction', { static: true, read: IgxGridComponent }) public grid!: IgxGridComponent;

package/igx-ts/grid/grid-batch-editing/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxGridBatchEditingTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,19 +12,7 @@ class IgxGridBatchEditingTemplate extends IgniteUIForAngularTemplate_1.IgniteUIF
         this.projectType = "igx-ts";
         this.name = "Grid Batch Editing";
         this.description = "Sample IgxGrid with batch editing";
-        this.dependencies = [
-            {
-                import: [
-                    "IgxGridModule",
-                    "IgxFocusModule",
-                    "IgxButtonModule",
-                    "IgxDialogModule",
-                    "IgxRippleModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxGridBatchEditingTemplate();

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

@@ -10,8 +10,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [FormsModule, BrowserAnimationsModule, IgxGridModule, IgxDatePickerModule, IgxCheckboxModule]
+      imports: [FormsModule, BrowserAnimationsModule, IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, <%=ClassName%>Component]
     })
     .compileComponents();
   }));

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

@@ -4,7 +4,8 @@ import { Employee, employeesData } from './localData';
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true
 })
 export class <%=ClassName%>Component implements OnInit {
   public localData: Employee[] = [];

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

@@ -13,8 +13,26 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
         this.name = "Custom Grid";
         this.description = "IgxGrid with optional features like sorting, filtering, editing, etc.";
         this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            { import: "IgxCheckboxModule", from: "<%=igxPackage%>" }
+            {
+                import: "IgxGridComponent",
+                from: "<%=igxPackage%>",
+                standalone: true
+            },
+            {
+                import: "IgxCheckboxComponent",
+                from: "<%=igxPackage%>",
+                standalone: true
+            },
+            {
+                import: "IgxColumnComponent",
+                from: "<%=igxPackage%>",
+                standalone: true
+            },
+            {
+                import: "DatePipe",
+                from: "@angular/common",
+                standalone: true
+            }
         ];
         this.hasExtraConfiguration = true;
     }
@@ -89,7 +107,7 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
                         break;
                     case "Row Editing":
                         gridFeatures.push(`[rowEditable]="true"`);
-                        this.dependencies.push({ import: "IgxDatePickerModule", from: "<%=igxPackage%>" });
+                        this.dependencies.push({ import: "IgxDatePickerComponent", from: "<%=igxPackage%>" });
                         break;
                     case "Row Selection":
                         const gridFeatureText = `rowSelection="multiple"`;
@@ -97,6 +115,11 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
                         break;
                     case "Paging":
                         additionalElements.push(`  <igx-paginator></igx-paginator>`);
+                        this.dependencies.push({
+                            standalone: true,
+                            import: "IgxPaginatorComponent",
+                            from: "<%=igxPackage%>"
+                        });
                         break;
                     case "Column Pinning":
                         columnPinning = '[pinned]="true"';
@@ -148,6 +171,36 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
                 selectedFeatures = `<p>Active Features: ${selectedFeatures}</p>`;
             }
             if (toolbarActions.length) {
+                this.dependencies = [
+                    ...this.dependencies,
+                    ...[
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarTitleComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarActionsComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarPinningComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarHidingComponent",
+                            from: "<%=igxPackage%>"
+                        }
+                    ]
+                ];
                 const parts = [
                     "  <igx-grid-toolbar>",
                     "    <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>",

package/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [NoopAnimationsModule, IgxGridModule]
+	 imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>Component]
     }).compileComponents();
   }));
 

package/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,12 +1,28 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { IgxDateSummaryOperand, IgxGridComponent, IgxSummaryResult } from '<%=igxPackage%>';
+import {
+  IgxDateSummaryOperand,
+  IgxGridComponent,
+  IgxSummaryResult,
+  IgxColumnComponent,
+  IgxCellHeaderTemplateDirective,
+  IgxIconComponent,
+  IgxPaginatorComponent,
+} from '<%=igxPackage%>';
 import { Employee, employeesData } from './localData';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxCellHeaderTemplateDirective,
+    IgxIconComponent,
+    IgxPaginatorComponent,
+  ]
 })
 export class <%=ClassName%>Component implements OnInit {
   @ViewChild('sampleGrid', { static: true, read: IgxGridComponent })

package/igx-ts/grid/grid-summaries/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTem
         this.projectType = "igx-ts";
         this.name = "Grid Summaries";
         this.description = "Sample IgxGrid with summaries feature";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            { import: "IgxIconModule", from: "<%=igxPackage%>" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxGridTemplate();

package/igx-ts/grid/multi-column-headers/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -10,8 +10,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [FormsModule, BrowserAnimationsModule, IgxGridModule, IgxDatePickerModule, IgxCheckboxModule]
+	  imports: [FormsModule, BrowserAnimationsModule, IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, <%=ClassName%>Component]
     })
     .compileComponents();
   }));

package/igx-ts/grid/multi-column-headers/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { Company, localData } from './localData';
+import { IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPaginatorComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPaginatorComponent]
 })
 export class <%=ClassName%>Component implements OnInit {
   public localData: Company[] = [];

package/igx-ts/grid/multi-column-headers/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+const constants_1 = require("../../../constants");
 class IgxMultiColumnHeadersTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
         super(__dirname);
@@ -12,11 +13,7 @@ class IgxMultiColumnHeadersTemplate extends IgniteUIForAngularTemplate_1.IgniteU
         this.projectType = "igx-ts";
         this.name = "Multi Column Headers";
         this.description = "IgxGrid with multiple header columns.";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            { import: "IgxCheckboxModule", from: "<%=igxPackage%>" },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
         this.hasExtraConfiguration = true;
     }
     setExtraConfiguration(extraConfigKeys) {

package/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component ],
-      imports: [ NoopAnimationsModule, IgxHierarchicalGridModule ]
+	  imports: [NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%>Component]
     })
     .compileComponents();
   }));

package/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { ARTISTS, Artist } from './data';
+import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
 })
 export class <%=ClassName%>Component {
   public localData: Artist[] = ARTISTS;