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

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

@@ -44,17 +44,16 @@ import {
 } 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 { LocalData } from './local-data';
+import { Contract, REGIONS } from './data/financialData';
 import { NgIf, NgFor, CurrencyPipe } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
-  providers: [LocalDataService],
+  providers: [LocalData],
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxSwitchComponent,
     ReactiveFormsModule,
@@ -84,7 +83,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     CurrencyPipe,
   ]
 })
-export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy {
+export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('grid1', { static: true }) public grid1!: IgxGridComponent;
   @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent;
   @ViewChild('buttonGroup2', { static: true }) public buttonGroup2!: IgxButtonGroupComponent;
@@ -137,11 +136,11 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy
   private timer: any;
   private volumeChanged: any;
   constructor(
-    private localService: LocalDataService,
+    private localData: LocalData,
     private elRef: ElementRef,
     private cdr: ChangeDetectorRef) {
-    this.subscription = this.localService.getData(this.volume);
-    this.localService.records.subscribe(x => { this.data = x; });
+    this.subscription = this.localData.getData(this.volume);
+    this.localData.records.subscribe(x => { this.data = x; });
   }
 
   public ngOnInit(): void {
@@ -167,7 +166,7 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy
     this.volumeChanged = this.volumeSlider.valueChange.pipe(debounce(() => timer(200)));
     this.volumeChanged.subscribe(
       () => {
-        this.localService.getData(this.volume);
+        this.localData.getData(this.volume);
       },
       (err: string) => console.log('Error: ' + err));
   }

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/{localData.service.ts → local-data.ts}

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable} from 'rxjs';
-import { FinancialData } from './localData/financialData';
+import { FinancialData } from './data/financialData';
 
 @Injectable()
-export class LocalDataService {
+export class LocalData {
   public records: Observable<any[]>;
   public records$: BehaviorSubject<any[]>;
 

package/igx-ts/custom-templates/fintech-tree-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 { <%=ClassName%> } from './<%=filePrefix%>';
+import { <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        <%=ClassName%>,
+        <%=ClassName%>TreeGridGroupingPipe
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -33,17 +33,16 @@ import {
 } from '<%=igxPackage%>';
 import { timer } from 'rxjs';
 import { debounce } from 'rxjs/operators';
-import { LocalDataService } from './localData.service';
+import { LocalData } from './local-data';
 import { ITreeGridAggregation, <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
 import { NgIf, CurrencyPipe } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
-  providers: [LocalDataService],
+  providers: [LocalData],
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxSwitchComponent,
     ReactiveFormsModule,
@@ -64,7 +63,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     <%=ClassName%>TreeGridGroupingPipe
   ]
 })
-export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy {
+export class <%=ClassName%> implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent;
   @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent;
   @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent;
@@ -141,9 +140,9 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy
   private timer: any;
   private volumeChanged: any;
 
-  constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
-    this.subscription = this.localService.getData(this.volume);
-    this.localService.records.subscribe((d) => this.data = d);
+  constructor(private zone: NgZone, private localData: LocalData, private elRef: ElementRef) {
+    this.subscription = this.localData.getData(this.volume);
+    this.localData.records.subscribe((d) => this.data = d);
   }
 
   public ngOnInit(): void {
@@ -151,7 +150,7 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy
     this.volumeChanged = this.volumeSlider.valueChange.pipe(debounce(() => timer(200)));
     this.volumeChanged.subscribe(
       () => {
-        this.localService.getData(this.volume);
+        this.localData.getData(this.volume);
       },
       (err: string) => console.log('Error: ' + err));
   }

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/{localData.service.ts → local-data.ts}

@@ -3,7 +3,7 @@ import { BehaviorSubject, Observable} from 'rxjs';
 import { FinancialData } from './assets/financialData';
 
 @Injectable()
-export class LocalDataService {
+export class LocalData {
   public records: Observable<any[]>;
   public records$: BehaviorSubject<any[]>;
 

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

@@ -1,9 +1,6 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-import { IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
 
 const MAIL_GROUP_NAME = 'email';
 const PASSWORD_GROUP_NAME = 'password';
@@ -12,33 +9,22 @@ const NEW_PASSWORD_GROUP_NAME = 'newPassword';
 const FIRST_NAME_GROUP_NAME = 'firstName';
 const LAST_NAME_GROUP_NAME = 'lastName';
 
-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: [
-        ReactiveFormsModule,
-        RouterTestingModule,
         NoopAnimationsModule,
-        IgxInputGroupModule,
-        IgxButtonModule,
-        IgxIconModule,
-        IgxRippleModule,
-        <%=ClassName%>Component,
-      ],
-      providers: [
-        { provide: ExternalAuthService, useValue: extAuthSpy },
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy },
+        <%=ClassName%>,
       ],
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -18,9 +18,8 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     ReactiveFormsModule,
     IgxInputGroupComponent,
@@ -33,7 +32,7 @@ import {
     NgIf
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public loginForm: FormGroup;
   public registrationForm: FormGroup;
   public showLogin = true;

package/igx-ts/custom-templates/weather-forecast/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/weather-forecast/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -14,9 +14,8 @@ import { NgIf, NgFor, NgClass } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxCardComponent,
     IgxCardHeaderComponent,
@@ -31,7 +30,7 @@ import { NgIf, NgFor, NgClass } from '@angular/common';
     NgClass
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   @ViewChild(IgxExpansionPanelComponent, { static: true })
   public panel!: IgxExpansionPanelComponent;
   public data = weatherData;

package/igx-ts/date-picker/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 { IgxDatePickerModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxDatePickerModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

package/igx-ts/dialog/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 { IgxDialogModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxDialogModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -1,25 +1,25 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { <%=ClassName%> } from './<%=filePrefix%>';
 
 defineCustomElements();
 
-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({
-	  imports: [CommonModule, <%=ClassName%>Component],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [CommonModule, <%=ClassName%>],
 	  schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -10,12 +10,11 @@ defineCustomElements();
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public layout: IgcDockManagerLayout = {
     rootPane: {
       type: IgcDockManagerPaneType.splitPane,

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

@@ -0,0 +1,25 @@
+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/dropdown/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -12,9 +12,8 @@ import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxButtonDirective,
     IgxRippleDirective,
@@ -26,6 +25,6 @@ import { NgFor } from '@angular/common';
   ]
 })
 
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public items: Country[] = data;
 }

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: "<%=filePrefix%>",
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
+})
+export class <%=ClassName%> {
+  title = '<%=name%>';
+}

package/igx-ts/grid/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 { IgxGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -1,4 +1,4 @@
-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 {
@@ -8,21 +8,21 @@ import {
   IgxGridModule,
   IgxRippleModule
 } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { <%=ClassName%> } 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({
-	  imports: [FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule, <%=ClassName%>Component]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule, <%=ClassName%>]
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });