@igniteui/angular-templates 17.0.1301 → 17.1.1310-beta.0

package/IgniteUIForAngularTemplate.d.ts

@@ -31,6 +31,7 @@ export declare class IgniteUIForAngularTemplate implements Template {
     registerInProject(projectPath: string, name: string, options?: AddTemplateArgs): void;
     getExtraConfiguration(): ControlExtraConfiguration[];
     setExtraConfiguration(extraConfigKeys: {}): void;
+    fileExists(filePath: string): boolean;
     protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string): void;
     protected getBaseVariables(name: string): {
         [key: string]: string;

package/IgniteUIForAngularTemplate.js

@@ -48,7 +48,35 @@ class IgniteUIForAngularTemplate {
         const TsUpdate = 
         // tslint:disable-next-line:no-submodule-imports
         require("@igniteui/cli-core/typescript").TypeScriptFileUpdate;
-        if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists("src/app/app-routing.module.ts")) {
+        // standalone components
+        const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
+        if (!this.fileExists(mainModulePath)) {
+            const appRoutesPath = "src/app/app.routes.ts";
+            const folderName = this.folderName(name);
+            const fileName = this.fileName(name);
+            if (!(options && options.skipRoute) && this.fileExists(appRoutesPath)) {
+                const rountesConfig = new TsUpdate(path.join(projectPath, appRoutesPath));
+                rountesConfig.addRoute(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`), this.fileName(name), //path
+                cli_core_1.Util.nameFromPath(name) //text
+                );
+            }
+            const componentFile = new TsUpdate(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`));
+            for (const dep of this.dependencies) {
+                if (dep.from && dep.from.startsWith(".")) {
+                    // relative file dependency
+                    const copy = Object.assign({}, dep);
+                    copy.from = cli_core_1.Util.relativePath(path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`), path.join(projectPath, copy.from), true, true);
+                    // can use addNgModuleMeta here instead?
+                    componentFile.addStandaloneImport(copy, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+                    continue;
+                }
+                componentFile.addStandaloneImport(dep, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content));
+            }
+            componentFile.finalize();
+            return;
+        }
+        // ngModule based components
+        if (!(options && options.skipRoute) && this.fileExists("src/app/app-routing.module.ts")) {
             //1) import the component class name,
             //2) and populate the Routes array with the path and component
             //for example: { path: 'combo', component: ComboComponent }
@@ -59,7 +87,6 @@ class IgniteUIForAngularTemplate {
         }
         //3) add an import of the component class from its file location.
         //4) populate the declarations portion of the @NgModule with the component class name.
-        const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
         const mainModule = new TsUpdate(mainModulePath);
         this.addClassDeclaration(mainModule, projectPath, name, modulePath);
         // import IgxModules and other dependencies
@@ -80,6 +107,9 @@ class IgniteUIForAngularTemplate {
         return [];
     }
     setExtraConfiguration(extraConfigKeys) { }
+    fileExists(filePath) {
+        return cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists(filePath);
+    }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         mainModule.addDeclaration(path.join(projPath, `src/app/${this.folderName(name)}/${this.fileName(name)}.component.ts`), modulePath !== "app.module.ts");
     }

package/constants.d.ts

@@ -0,0 +1 @@
+export declare const IGNITEUI_ANGULAR_PACKAGE = "igniteui-angular@~17.0.0";

package/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNITEUI_ANGULAR_PACKAGE = void 0;
+exports.IGNITEUI_ANGULAR_PACKAGE = "igniteui-angular@~17.0.0";

package/igx-ts/accordion/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, IgxAccordionModule, IgxSwitchModule ]
+      imports: [NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,9 +1,29 @@
 import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+	IgxSwitchComponent,
+	IgxAccordionComponent,
+	IgxExpansionPanelComponent,
+	IgxExpansionPanelHeaderComponent,
+	IgxExpansionPanelTitleDirective,
+	IgxExpansionPanelBodyComponent,
+  } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxAccordionComponent,
+    IgxExpansionPanelComponent,
+    IgxExpansionPanelHeaderComponent,
+    IgxExpansionPanelTitleDirective,
+    IgxExpansionPanelBodyComponent,
+  ],
 })
 export class <%=ClassName%>Component {
   public singleBranchExpand = false;

package/igx-ts/accordion/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 IgxAccordionTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxAccordionTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngul
         this.projectType = "igx-ts";
         this.name = "Accordion";
         this.description = "Basic IgxAccordion sample";
-        this.dependencies = [{
-                import: ["IgxAccordionModule", "IgxSwitchModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxAccordionTemplate();

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

@@ -10,8 +10,8 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component, <%=ClassName%>PipeStartsWith],
-      imports: [FormsModule, IgxDropDownModule, IgxAutocompleteModule, NoopAnimationsModule, IgxInputGroupModule]
+      imports: [FormsModule, IgxDropDownModule, IgxAutocompleteModule, NoopAnimationsModule,
+		IgxInputGroupModule, <%=ClassName%>Component, <%=ClassName%>PipeStartsWith]
     })
       .compileComponents();
   }));

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

@@ -1,10 +1,33 @@
-import { Component, Pipe, PipeTransform } from '@angular/core';
+import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core';
 import { Towns } from './towns-data';
+import { NgFor } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+  IgxInputGroupComponent,
+  IgxLabelDirective,
+  IgxInputDirective,
+  IgxAutocompleteDirective,
+  IgxDropDownComponent,
+  IgxDropDownItemComponent,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxInputDirective,
+    IgxAutocompleteDirective,
+    IgxDropDownComponent,
+    NgFor,
+    IgxDropDownItemComponent,
+    forwardRef(() => <%=ClassName%>PipeStartsWith),
+  ],
 })
 export class <%=ClassName%>Component {
   public towns: string[];
@@ -15,7 +38,7 @@ export class <%=ClassName%>Component {
   }
 }
 
-@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+@Pipe({ standalone: true, name: '<%=camelCaseName%>StartsWith' })
 export class <%=ClassName%>PipeStartsWith implements PipeTransform {
   public transform(collection: string[], term = '') {
     return collection.filter(item => item.toLowerCase().startsWith(term.trim().toLowerCase()));

package/igx-ts/autocomplete/autocomplete-custom/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 IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,16 +12,7 @@ class IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAn
         this.projectType = "igx-ts";
         this.name = "Simple Autocomplete";
         this.description = "Simple IgxAutocomplete";
-        this.dependencies = [{
-                import: ["IgxAutocompleteModule", "IgxDropDownModule", "IgxInputGroupModule"],
-                from: "<%=igxPackage%>"
-            }, {
-                import: ["FormsModule"],
-                from: "@angular/forms"
-            }, {
-                declare: ["<%=ClassName%>PipeStartsWith"],
-                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxAutocompleteTemplate();

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

@@ -1,11 +1,42 @@
-import { Component, Pipe, PipeTransform, ViewChild } from '@angular/core';
-import { IgxToastComponent, ISelectionEventArgs, PositionSettings, HorizontalAlignment, VerticalAlignment } from '<%=igxPackage%>';
+import { Component, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core';
+import {
+  IgxToastComponent,
+  ISelectionEventArgs,
+  PositionSettings,
+  HorizontalAlignment,
+  VerticalAlignment,
+  IgxAutocompleteDirective,
+  IgxDropDownComponent,
+  IgxDropDownGroupComponent,
+  IgxDropDownItemComponent,
+  IgxInputDirective,
+  IgxInputGroupComponent,
+  IgxLabelDirective,
+} from '<%=igxPackage%>';
 import { Region, Town, townsExtended } from './towns-data-extended';
+import { NgFor } 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: [
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    ReactiveFormsModule,
+    IgxInputDirective,
+    IgxAutocompleteDirective,
+    FormsModule,
+    IgxDropDownComponent,
+    NgFor,
+    IgxDropDownGroupComponent,
+    IgxDropDownItemComponent,
+    IgxToastComponent,
+    forwardRef(() => <%=ClassName%>PipeStartsWith),
+    forwardRef(() => <%=ClassName%>RegionContains)
+  ]
 })
 export class <%=ClassName%>Component {
   public regions!: Region[];
@@ -35,14 +66,14 @@ export class <%=ClassName%>Component {
   }
 }
 
-@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+@Pipe({ standalone: true, name: '<%=camelCaseName%>StartsWith' })
 export class  <%=ClassName%>PipeStartsWith implements PipeTransform {
   public transform(collection: Town[], term = '') {
     return collection.filter(item => item.name.toLowerCase().startsWith(term.trim().toLowerCase()));
   }
 }
 
-@Pipe({ name: '<%=camelCaseName%>RegionContains' })
+@Pipe({ standalone: true, name: '<%=camelCaseName%>RegionContains' })
 export class <%=ClassName%>RegionContains implements PipeTransform {
   transform(regions: Region[], term = '') {
     return this.filterRegions(regions, term);

package/igx-ts/autocomplete/autocomplete-extended/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 IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,19 +12,7 @@ class IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAn
         this.projectType = "igx-ts";
         this.name = "Enhanced Autocomplete";
         this.description = "IgxAutocomplete with enhanced groups";
-        this.dependencies = [{
-                import: ["IgxAutocompleteModule", "IgxDropDownModule", "IgxInputGroupModule", "IgxToastModule"],
-                from: "<%=igxPackage%>"
-            }, {
-                import: ["FormsModule"],
-                from: "@angular/forms"
-            }, {
-                declare: ["<%=ClassName%>PipeStartsWith"],
-                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
-            }, {
-                declare: ["<%=ClassName%>RegionContains"],
-                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxAutocompleteTemplate();

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

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

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

@@ -1,12 +1,23 @@
-
-import { AfterViewInit, Component, ViewEncapsulation, ViewChild } from '@angular/core';
-import { IgxBulletGraphComponent, IgxLinearGraphRangeComponent } from 'igniteui-angular-gauges';
+import {
+	AfterViewInit,
+	Component,
+	ViewEncapsulation,
+	ViewChild,
+  } from '@angular/core';
+  import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>';
+  import {
+	IgxBulletGraphComponent,
+	IgxLinearGraphRangeComponent,
+	IgxBulletGraphCoreModule,
+  } from 'igniteui-angular-gauges';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule]
 })
 export class <%=ClassName%>Component implements AfterViewInit {
   @ViewChild('bulletGraph', { static: true })

package/igx-ts/bullet-graph/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 IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,11 +12,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Bullet Graph";
         this.description = "IgxBulletGraph with different animations.";
-        this.dependencies = [{
-                import: ["IgxBulletGraphModule"],
-                from: "igniteui-angular-gauges"
-            }];
-        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0"];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxBulletGraphTemplate();

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

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

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

@@ -1,9 +1,12 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxCalendarComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [IgxLayoutDirective, IgxCalendarComponent]
 })
 export class <%=ClassName%>Component { }

package/igx-ts/calendar/default/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 IgxCalendarTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
         super(__dirname);
@@ -12,9 +13,7 @@ class IgxCalendarTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngula
         this.projectType = "igx-ts";
         this.name = "Calendar";
         this.description = "IgxCalendar with single selection";
-        this.dependencies = [
-            { import: "IgxCalendarModule", from: "<%=igxPackage%>" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
         this.hasExtraConfiguration = true;
     }
     setExtraConfiguration(extraConfigKeys) {

package/igx-ts/carousel/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, IgxCarouselModule]
+	  imports: [NoopAnimationsModule, IgxCarouselModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,12 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { IgxCarouselComponent, IgxSlideComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxCarouselComponent, NgFor, IgxSlideComponent]
 })
 export class <%=ClassName%>Component implements OnInit {
-
   public slides: Slide[] = [];
   public interval = 3000;
   public pause = true;

package/igx-ts/carousel/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 IgxCarouselTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxCarouselTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngula
         this.projectType = "igx-ts";
         this.name = "Carousel";
         this.description = "basic IgxCarousel";
-        this.dependencies = [
-            { import: "IgxCarouselModule", from: "<%=igxPackage%>" },
-            { import: "CommonModule", from: "@angular/common" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxCarouselTemplate();

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

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

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

@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
-import { CategoryChartType } from 'igniteui-angular-charts';
+import { CategoryChartType, IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [FormsModule, IgxCategoryChartModule]
 })
 export class <%=ClassName%>Component {
   public chartType = CategoryChartType.Auto;
 
-  data = [
+  public data = [
     { CountryName: 'China', Pop1995: 1216, Pop2005: 1297, },
     { CountryName: 'India', Pop1995: 920, Pop2005: 1090, },
     { CountryName: 'United States', Pop1995: 266, Pop2005: 295, },

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

@@ -11,10 +11,6 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
         this.projectType = "igx-ts";
         this.name = "Category Chart";
         this.description = "basic category chart with chart type selector.";
-        this.dependencies = [
-            { import: "IgxCategoryChartModule", 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/chip/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, IgxChipsModule]
+	  imports: [NoopAnimationsModule, IgxChipsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -8,8 +8,14 @@ import {
   IgxDropDownComponent,
   ISelectionEventArgs,
   OverlaySettings,
-  VerticalAlignment
+  VerticalAlignment,
+  IgxLayoutDirective,
+  IgxChipComponent,
+  IgxButtonDirective,
+  IgxDropDownItemNavigationDirective,
+  IgxDropDownItemComponent,
 } from '<%=igxPackage%>';
+import { NgFor } from '@angular/common';
 
 interface NamedEntry {
   id: string;
@@ -19,11 +25,20 @@ interface NamedEntry {
 @Component({
  selector: 'app-<%=filePrefix%>',
  styleUrls: ['./<%=filePrefix%>.component.scss'],
- templateUrl: './<%=filePrefix%>.component.html'
+ templateUrl: './<%=filePrefix%>.component.html',
+ standalone: true,
+ imports: [
+    IgxLayoutDirective,
+    IgxChipsAreaComponent,
+    NgFor,
+    IgxChipComponent,
+    IgxButtonDirective,
+    IgxDropDownItemNavigationDirective,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+  ]
 })
-
 export class <%=ClassName%>Component {
-
   public dropDownList: NamedEntry[] = [
     {
      id: '1',

package/igx-ts/chip/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 IgxChipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxChipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTem
         this.projectType = "igx-ts";
         this.name = "Chip";
         this.description = "basic IgxChip";
-        this.dependencies = [{
-                import: ["IgxButtonModule", "IgxChipsModule", "IgxDropDownModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxChipTemplate();

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

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

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

@@ -1,12 +1,24 @@
 import { Component } from '@angular/core';
 import { localData, State } from './local-data';
+import {
+  IgxComboComponent,
+  IgxComboItemDirective,
+  IgxComboHeaderDirective,
+  IgxComboFooterDirective,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxComboComponent,
+    IgxComboItemDirective,
+    IgxComboHeaderDirective,
+    IgxComboFooterDirective,
+  ]
 })
-
 export class <%=ClassName%>Component {
   public localData: State[] = localData;
 }

package/igx-ts/combo/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 IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTe
         this.projectType = "igx-ts";
         this.name = "Combo";
         this.description = "basic IgxCombo with templating";
-        this.dependencies = [{
-                import: ["IgxComboModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxComboTemplate();