@igniteui/angular-templates 21.1.1492 → 21.1.14100-alpha.1

package/IgniteUIForAngularTemplate.js

@@ -60,22 +60,19 @@ class IgniteUIForAngularTemplate {
     }
     //TODO: rename name to fullName for clarity + in all other places fileName to fullName
     registerInProject(projectPath, name, options) {
-        let modulePath = "app.module.ts";
+        let modulePath = "app-module.ts";
         if (options && options.modulePath) {
             modulePath = options.modulePath;
         }
         // D.P. Don't use the top-level import as that chains import of typescript
         // which slows down execution of the entire component noticeably (template loading)
         // https://www.typescriptlang.org/docs/handbook/modules.html#dynamic-module-loading-in-nodejs
-        // tslint:disable-next-line:variable-name
-        const TsUpdate = 
-        // tslint:disable-next-line:no-submodule-imports
-        require("@igniteui/angular-templates").AngularTypeScriptFileUpdate;
+        const TsUpdate = require("./AngularTypeScriptFileUpdate").AngularTypeScriptFileUpdate;
         const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
         const folderName = this.folderName(name);
         const fileName = this.fileName(name);
-        const componentFilePath = path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`);
-        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}Component`;
+        const componentFilePath = path.join(projectPath, `src/app/${folderName}/${fileName}.ts`);
+        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}`;
         // standalone components
         if (!this.fileExists(mainModulePath)) {
             const appRoutesPath = "src/app/app.routes.ts";
@@ -105,11 +102,11 @@ class IgniteUIForAngularTemplate {
             return;
         }
         // ngModule based components
-        if (!(options && options.skipRoute) && this.fileExists("src/app/app-routing.module.ts")) {
+        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 }
-            const routingModulePath = path.join(projectPath, "src/app/app-routing.module.ts");
+            const routingModulePath = path.join(projectPath, "src/app/app-routing-module.ts");
             const routingModule = new TsUpdate(routingModulePath, false, { indentSize: 2, singleQuotes: true });
             routingModule.addRoute({
                 modulePath: cli_core_1.Util.relativePath(routingModulePath, componentFilePath, true, true),
@@ -125,7 +122,7 @@ class IgniteUIForAngularTemplate {
         mainModule.addNgModuleMeta({
             declare: this.addAsNgModelDeclaration ? [className] : [],
             from: cli_core_1.Util.relativePath(mainModulePath, componentFilePath, true, true),
-            export: modulePath !== "app.module.ts" ? [className] : []
+            export: modulePath !== "app-module.ts" ? [className] : []
         }, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
         );
         // import IgxModules and other dependencies

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+import { IgxAccordionModule, IgxSwitchModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -11,9 +11,8 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxSwitchComponent,
     ReactiveFormsModule,
@@ -25,6 +24,6 @@ import {
     IgxExpansionPanelBodyComponent,
   ],
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public singleBranchExpand = false;
 }

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

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '<%=igxPackage%>';
+import { <%=ClassName%>, <%=ClassName%>PipeStartsWith } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsModule, IgxDropDownModule, IgxAutocompleteModule, NoopAnimationsModule,
+		IgxInputGroupModule, <%=ClassName%>, <%=ClassName%>PipeStartsWith]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -13,9 +13,8 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     ReactiveFormsModule,
     FormsModule,
@@ -29,7 +28,7 @@ import {
     forwardRef(() => <%=ClassName%>PipeStartsWith),
   ],
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public towns: string[];
   public townSelected = '';
 

package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/{__filePrefix__.component.spec.ts → __filePrefix__.spec.ts}

@@ -1,21 +1,21 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule, IgxToastModule } from '<%=igxPackage%>';
 import {
-  <%=ClassName%>Component,
+  <%=ClassName%>,
   <%=ClassName%>PipeStartsWith,
   <%=ClassName%>RegionContains
-} from './<%=filePrefix%>.component';
+} from './<%=filePrefix%>';
 
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
-        <%=ClassName%>Component,
+        <%=ClassName%>,
         <%=ClassName%>PipeStartsWith,
         <%=ClassName%>RegionContains,
         FormsModule,
@@ -27,10 +27,10 @@ describe('<%=ClassName%>Component', () => {
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -19,9 +19,8 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxInputGroupComponent,
     IgxLabelDirective,
@@ -38,7 +37,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     forwardRef(() => <%=ClassName%>RegionContains)
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public regions!: Region[];
   public townSelected!: string;
   public postalCode?: number;

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IgxBulletGraphModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    // disable animation
+    component.bulletGraph.transitionDuration = 0;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -13,13 +13,12 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule]
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
   @ViewChild('bulletGraph', { static: true })
   public bulletGraph!: IgxBulletGraphComponent;
 

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxCalendarModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IgxCalendarModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxCarouselModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxCarouselModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsModule, IgxCategoryChartModule, <%=ClassName%>],
+      teardown: { destroyAfterEach: false }
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -4,12 +4,11 @@ import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [FormsModule, IgxCategoryChartModule]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public chartType = CategoryChartType.Auto;
 
   public data = [

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxChipsModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxChipsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -24,9 +24,8 @@ interface NamedEntry {
 
 @Component({
  selector: 'app-<%=filePrefix%>',
- styleUrls: ['./<%=filePrefix%>.component.scss'],
- templateUrl: './<%=filePrefix%>.component.html',
- standalone: true,
+ templateUrl: './<%=filePrefix%>.html',
+ styleUrl: './<%=filePrefix%>.scss',
  imports: [
     IgxLayoutDirective,
     IgxChipsAreaComponent,
@@ -38,7 +37,7 @@ interface NamedEntry {
     IgxDropDownItemComponent,
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public dropDownList: NamedEntry[] = [
     {
      id: '1',

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxComboModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	 imports: [IgxComboModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -9,9 +9,8 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxComboComponent,
     IgxComboItemDirective,
@@ -19,6 +18,6 @@ import {
     IgxComboFooterDirective,
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public localData: State[] = localData;
 }

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

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        <%=ClassName%>
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -37,9 +37,8 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxSwitchComponent,
     ReactiveFormsModule,
@@ -60,7 +59,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     DecimalPipe,
   ],
 })
-export class <%=ClassName%>Component implements OnInit, OnDestroy, AfterViewInit {
+export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('grid1', { read: IgxGridComponent, static: true })
   public grid1!: IgxGridComponent;
 

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

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxExcelExporterService, IgxCsvExporterService } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        <%=ClassName%>
+      ],
+      providers: [IgxExcelExporterService, IgxCsvExporterService]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -49,9 +49,8 @@ import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxGridComponent,
     IgxGridToolbarComponent,
@@ -77,7 +76,7 @@ import { NgIf } from '@angular/common';
     IgxSparklineCoreModule,
   ]
 })
-export class <%=ClassName%>Component implements OnInit, AfterViewInit {
+export class <%=ClassName%> implements OnInit, AfterViewInit {
 
   @ViewChild('grid1', { read: IgxGridComponent, static: true })
   public grid1!: IgxGridComponent;

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

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+		imports: [
+		  NoopAnimationsModule,
+		  <%=ClassName%>,
+		],
+    teardown: { destroyAfterEach: false }
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});