@igniteui/angular-templates 21.1.1491 → 21.1.1500-rc.0

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

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

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

@@ -1,31 +0,0 @@
-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'],
-  standalone: true,
-  imports: [
-    IgxButtonDirective,
-    IgxRippleDirective,
-    IgxToggleActionDirective,
-    IgxDropDownItemNavigationDirective,
-    IgxDropDownComponent,
-    NgFor,
-    IgxDropDownItemComponent,
-  ]
-})
-
-export class <%=ClassName%>Component {
-  public items: Country[] = data;
-}

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

@@ -1,7 +0,0 @@
-<p>Basic financial chart with automatic toolbar and type selection.</p>
-<p>You can read more about configuring the igx-financial-chart component in the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart"
-    target="_blank">official documentation</a>.
-</p>
-<igx-financial-chart [dataSource]="data" height="600px" width="100%">
-</igx-financial-chart>

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

@@ -1,3 +0,0 @@
-:host {
-  width: 100%;
-}

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

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

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

@@ -1,14 +0,0 @@
-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'],
-  standalone: true,
-  imports: [IgxFinancialChartModule]
-})
-export class <%=ClassName%>Component {
-  public data: Stock[] = AMZNData;
-}

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

@@ -1,4 +0,0 @@
-<div>
-  <h1>Name: <%=name%></h1>
-  <h4><%=description%></h4>
-</div>

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

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

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  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.html

@@ -1,8 +0,0 @@
-<p>igx-grid component with auto generated columns below and local data.</p>
-<p>You can read more about configuring the igx-grid component in the
-  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/README.md" target="_blank">README</a> or the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank">official documentation</a>.
-</p>
-<igx-grid #grid1 [data]="localData" [autoGenerate]="true" (columnInit)="onColumnInit($event)" width="960px" height="550px">
-  <igx-paginator></igx-paginator>
-</igx-grid>

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

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

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

@@ -1,25 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ColumnType, IgxGridComponent, IgxPaginatorComponent } from '<%=igxPackage%>';
-import { Employee, employeesData } from './localData';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [IgxGridComponent, IgxPaginatorComponent]
-})
-export class <%=ClassName%>Component implements OnInit {
-  public localData: Employee[] = [];
-  title = '<%=name%>';
-
-  ngOnInit(): void {
-    this.localData = employeesData;
-  }
-
-  public onColumnInit(column: ColumnType): void {
-    if (column.field === 'RegistererDate') {
-      column.formatter = (date => date.toLocaleDateString());
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-<p>igx-grid component with batch editing.</p>
-<p>You can read more about configuring the igx-grid component in the
-  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/README.md"
-    target="_blank">README</a> or the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid"
-    target="_blank">official documentation</a>.
-</p>
-<igx-grid #gridRowEditTransaction [data]="data" [primaryKey]="'ProductID'" width="835px" height="500px"
-  [batchEditing]="true" [rowEditable]="true">
-  <igx-column width="135px">
-    <ng-template igxCell let-cell="cell" let-val>
-      <button igxButton (click)="deleteRow(cell.id?.rowID)" [disabled]="cell.row.deleted">Delete</button>
-    </ng-template>
-  </igx-column>
-  <igx-column width="60px" field="ProductID" header="Product ID"></igx-column>
-  <igx-column width="100px" field="ReorderLevel" header="ReorderLever" [dataType]="'number'"></igx-column>
-  <igx-column width="190px" field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
-  <igx-column width="100px" field="UnitsInStock" header="UnitsInStock" [dataType]="'number'">
-    <ng-template igxCellEditor let-cell="cell">
-      <input name="units" [(ngModel)]="cell.editValue" [igxFocus]="true" style="color: black; width: 30px;" />
-    </ng-template>
-  </igx-column>
-  <igx-column width="150px" field="OrderDate" [dataType]="'date'"></igx-column>
-  <igx-column width="100px" field="Discontinued" header="Discontinued" [dataType]="'boolean'"></igx-column>
-</igx-grid>
-<div class="buttons-row">
-  <button igxButton (click)="addRow()" igxRipple>Add Row</button>
-  <div class="buttons-wrapper">
-    <button igxButton [disabled]="!transactions.canUndo" (click)="transactions.undo()" igxRipple>Undo</button>
-    <button igxButton [disabled]="!transactions.canRedo" (click)="transactions.redo()" igxRipple>Redo</button>
-    <button igxButton [disabled]="!hasTransactions" (click)="openCommitDialog()" igxRipple>Commit</button>
-  </div>
-</div>
-<igx-dialog title="Submit the following transactions?">
-  <igx-grid #dialogGrid [data]="transactionsData" [rowHeight]="64"
-    [primaryKey]="'id'" width="600px" height="300px" [emptyGridMessage]="'No available transactions'">
-    <igx-column field="id" header="ID" [dataType]="'string'" width="100px"></igx-column>
-    <igx-column field="type" header="Type" width="150px" [sortable]="true">
-      <ng-template igxCell let-cell="cell" let-val>
-        <span [class]="classFromType(val)">{{ typeFormatter(val) }}</span>
-      </ng-template>
-    </igx-column>
-    <igx-column field="newValue" header="Value" width="900px">
-      <ng-template igxCell let-cell="cell" let-val>
-        <span class="transaction-log">{{ stateFormatter(val) }}</span>
-      </ng-template>
-    </igx-column>
-  </igx-grid>
-  <div class="buttons-wrapper">
-    <button igxButton (click)="commit()">Commit</button>
-    <button igxButton (click)="discard()">Discard</button>
-    <button igxButton (click)="cancel()">Cancel</button>
-  </div>
-</igx-dialog>

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

@@ -1,34 +0,0 @@
-h4 {
-  text-align: center;
-  padding-top: 2%;
-  padding-bottom: 2%;
-}
-.buttons-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 5px;
-}
-.buttons-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  padding: 10px 0;
-}
-.transaction--update,
-.transaction--delete,
-.transaction--add {
-  font-weight: 600;
-}
-.transaction--add {
-  color: #6b3;
-}
-.transaction--update {
-  color: #4a71b9;
-}
-.transaction--delete {
-  color: #ee4920;
-}
-.transaction-log {
-  word-wrap: none;
-}

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

@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  IgxButtonModule,
-  IgxDialogModule,
-  IgxFocusModule,
-  IgxGridModule,
-  IgxRippleModule
-} from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-	  imports: [FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule, <%=ClassName%>Component]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,121 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-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',
-  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;
-  @ViewChild(IgxDialogComponent, { static: true }) public dialog!: IgxDialogComponent;
-  @ViewChild('dialogGrid', { static: true, read: IgxGridComponent }) public dialogGrid!: IgxGridComponent;
-
-  public data: Product[];
-  public transactionsData: Transaction[] = [];
-  private addProductId: number;
-
-  public get transactions(): TransactionService<Transaction, State> {
-    return this.grid.transactions;
-  }
-
-  constructor() {
-    this.data = data;
-    this.addProductId = this.data.length + 1;
-  }
-
-  public ngOnInit(): void {
-    this.transactionsData = this.transactions.getAggregatedChanges(true);
-    this.grid.rendered$.subscribe(() => {
-      this.transactions.onStateUpdate?.subscribe(() => {
-        this.transactionsData = this.transactions.getAggregatedChanges(true);
-      })
-    })
-  }
-
-  public addRow(): void {
-    this.grid.addRow({
-      CategoryID: this.getRandomInt(1, 10),
-      Discontinued: this.getRandomInt(1, 10) % 2 === 0,
-      OrderDate: new Date(this.getRandomInt(2000, 2050), this.getRandomInt(0, 11), this.getRandomInt(1, 25)),
-      ProductID: this.addProductId++,
-      ProductName: 'Product with index ' + this.getRandomInt(0, 20),
-      QuantityPerUnit: (this.getRandomInt(1, 10) * 10).toString() + ' pcs.',
-      ReorderLevel: this.getRandomInt(10, 20),
-      SupplierID: this.getRandomInt(1, 20),
-      UnitPrice: this.getRandomInt(10, 1000),
-      UnitsInStock: this.getRandomInt(1, 100),
-      UnitsOnOrder: this.getRandomInt(1, 20)
-    });
-  }
-
-  public classFromType(type: string): string {
-    return `transaction--${type.toLowerCase()}`;
-  }
-
-  public deleteRow(rowID: any): void {
-    this.grid.deleteRow(rowID);
-  }
-
-  public openCommitDialog(): void {
-    this.dialog.open();
-    this.dialogGrid.reflow();
-  }
-
-  public commit(): void {
-    this.grid.transactions.commit(this.data);
-    this.dialog.close();
-  }
-
-  public cancel(): void {
-    this.dialog.close();
-  }
-
-  public discard(): void {
-    this.grid.transactions.clear();
-    this.dialog.close();
-  }
-
-  private getRandomInt(min: number, max: number): number {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  }
-
-  public get hasTransactions(): boolean {
-    return this.grid.transactions.getAggregatedChanges(false).length > 0;
-  }
-
-  public stateFormatter(value: string): string {
-    return JSON.stringify(value);
-  }
-
-  public typeFormatter(value: string): string {
-    return value.toUpperCase();
-  }
-}

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

@@ -1,25 +0,0 @@
-<p><%=description%><br />
-You can read more about configuring the igx-grid component in the
-<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/README.md" target="_blank">README</a> or the
-<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank">official documentation</a>.</p>
-<%=selectedFeatures%>
-<igx-grid #grid1 [data]="localData" primaryKey="EmployeeID" width="900px" height="550px" <%=gridFeatures%>>
-  <igx-column field="FirstName" header="First Name"  width="150px" <%=columnFeatures%> <%=columnPinning%>>
-  </igx-column>
-  <igx-column field="LastName" header="Last Name" width="150px" <%=columnFeatures%> <%=columnPinning%>>
-  </igx-column>
-  <igx-column field="Country" width="140px" <%=columnFeatures%> <%=groupByColumn%>>
-  </igx-column>
-  <igx-column field="Age" width="110px" dataType="number" <%=columnFeatures%> <%=groupByColumn%>>
-  </igx-column>
-  <igx-column field="RegistererDate" header="Registerer Date" width="180px" dataType="date" <%=columnFeatures%>>
-    <ng-template igxCell let-value>
-        {{ value | date }}
-    </ng-template>
-  </igx-column>
-    <igx-column field="IsActive" header="Is Active" width="140px" dataType="boolean" <%=columnBoolFeatures%>>
-    <ng-template igxCell let-cell="cell">
-      <igx-checkbox <%=checkBoxBind%>></igx-checkbox>
-    </ng-template>
-  </igx-column><%=additionalMarkup%>
-</igx-grid>

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

@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCheckboxModule, IgxDatePickerModule, IgxGridModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule, BrowserAnimationsModule, IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, <%=ClassName%>Component]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Employee, employeesData } from './localData';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true
-})
-export class <%=ClassName%>Component implements OnInit {
-  public localData: Employee[] = [];
-  title = '<%=name%>';
-
-  ngOnInit(): void {
-    this.localData = employeesData;
-  }
-}

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

@@ -1,46 +0,0 @@
-<p>igx-grid component with a predefined set of default summaries and a custom summary.</p>
-<p>You can read more about configuring the igx-grid summaries feature in the
-  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/README.md" target="_blank">README</a> or the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries" target="_blank">official documentation</a>.
-</p>
-
-<igx-grid #sampleGrid [data]="localData" [autoGenerate]="false" width="900px" height="600px">
-  <igx-column field="FirstName" header="First Name" [resizable]="true" [hasSummary]="true">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-column field="LastName" header="Last Name" [resizable]="true" [hasSummary]="true">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-column field="Country" header="Country" [resizable]="true" [hasSummary]="true">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-column field="Age" header="Age" [resizable]="true" [editable]="true" [dataType]="'number'" [hasSummary]="true">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-column field="RegistererDate" header="Registerer Date" [formatter]="formatDate" [resizable]="true" [dataType]="'date'"
-    [hasSummary]="true" [summaries]="customDateSummary">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-column field="IsActive" header="IsActive" [dataType]="'boolean'" [resizable]="true" [hasSummary]="true">
-    <ng-template igxHeader let-col>
-      <span style="float:left">{{col.field}}</span>
-      <igx-icon class="header-icon {{ col.hasSummary ? 'summary-color' : '' }}" (click)="toggleSummary(col.field)">functions</igx-icon>
-    </ng-template>
-  </igx-column>
-  <igx-paginator></igx-paginator>
-</igx-grid>

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

@@ -1,17 +0,0 @@
-.igx-grid__th-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-icon {
-  font-size: 1.4em;
-  width: 1.1em;
-  height: 1.1em;
-  float: right;
-  cursor: pointer;
-}
-
-.summary-color {
-  color: #731963;
-}

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

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