26023601418

Committed 18 May 2026 08:57AM UTC coverage: 4.854% (-85.3%) from 90.174%

Build # 26023601418

Build Type

Pull #17281

github

Committed by

web-flow

Commit Message

Merge e7ce7a18e into 5a85df190

Pull Request Pull Request #17281: feat: Added virtual scroll component and sample implementation

Coverage Stats

400 of 17347 branches covered (2.31%)

Branch coverage included in aggregate %.

63 of 222 new or added lines in 4 files covered. (28.38%)

27932 existing lines in 341 files now uncovered.

2022 of 32547 relevant lines covered (6.21%)

0.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

4.76

/projects/igniteui-angular/grids/lite/src/grid-lite-column.component.ts

import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, CUSTOM_ELEMENTS_SCHEMA, Directive, effect, EmbeddedViewRef, inject, input, TemplateRef, ViewContainerRef } from '@angular/core';
import { ColumnConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext, Keys, DataType } from 'igniteui-grid-lite';

/** Configuration object for grid columns. */
export type IgxGridLiteColumnConfiguration<T extends object = any> = ColumnConfiguration<T>;

export type IgxGridLiteColumnSortConfiguration<T extends object = any> = ColumnSortConfiguration<T>;


/**
 * Directive providing type information for header template contexts.
 * Use this directive on ng-template elements that render header templates.
 *
 * @example
 * ```html
 * <ng-template igxGridLiteHeader let-column>
 *   <div>{{column.header}}</div>
 * </ng-template>
 * ```
 */
@Directive({ selector: '[igxGridLiteHeader]' })
export class IgxGridLiteHeaderTemplateDirective<T extends object = any> {
    public template = inject<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>(TemplateRef);

    public static ngTemplateContextGuard<T extends object = any>(_: IgxGridLiteHeaderTemplateDirective<T>, ctx: any): ctx is IgxGridLiteHeaderTemplateContext<T> {
        return true;
    }
}

/**
 * Directive providing type information for cell template contexts.
 * Use this directive on ng-template elements that render cell templates.
 *
 * @example
 * ```html
 * <ng-template igxGridLiteCell let-value let-column="column" let-rowIndex="rowIndex" let-data="data">
 *   <div>{{value}}</div>
 * </ng-template>
 * ```
 */
@Directive({ selector: '[igxGridLiteCell]' })
export class IgxGridLiteCellTemplateDirective<T extends object = any> {
    public template = inject<TemplateRef<IgxGridLiteCellTemplateContext<T>>>(TemplateRef);

    public static ngTemplateContextGuard<T extends object = any>(_: IgxGridLiteCellTemplateDirective<T>, ctx: unknown): ctx is IgxGridLiteCellTemplateContext<T> {
        return true;
    }
}

@Component({
    selector: 'igx-grid-lite-column',
    changeDetection: ChangeDetectionStrategy.OnPush,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    templateUrl: './grid-lite-column.component.html'
})
export class IgxGridLiteColumnComponent<T extends object = any> {

    //#region Internal state

    private readonly _view = inject(ViewContainerRef);

    /** Reference to the embedded view for the header template and its template function. */
    private headerViewRef?: EmbeddedViewRef<IgxGridLiteHeaderTemplateContext<T>>;
    protected headerTemplateFunc?: (ctx: IgcHeaderContext<T>) => Node[];

    /** Reference to the embedded view for the cell template and its template function. */
    private cellViewRefs? = new Map<T, EmbeddedViewRef<IgxGridLiteCellTemplateContext<T>>>();
    protected cellTemplateFunc?: (ctx: IgcCellContext<T>) => Node[];

    /** Template directives used for inline templating */
    private readonly headerTemplateDirective = contentChild(IgxGridLiteHeaderTemplateDirective<T>);
    private readonly cellTemplateDirective = contentChild(IgxGridLiteCellTemplateDirective<T>);

    //#endregion

    //#region Inputs

    /** The field from the data for this column. */
    public readonly field = input<Keys<T>>();

    /** The data type of the column's values. */
    public readonly dataType = input<DataType>('string');

    /** The header text of the column. */
    public readonly header = input<string>();

    /** The width of the column. */
    public readonly width = input<string>();

    /** Indicates whether the column is hidden. */
    public readonly hidden = input(false, { transform: booleanAttribute });

    /** Indicates whether the column is resizable. */
    public readonly resizable = input(false, { transform: booleanAttribute });

    /** Indicates whether the column is sortable. */
    public readonly sortable = input(false, { transform: booleanAttribute });

    /** Whether sort operations will be case sensitive. */
    public readonly sortingCaseSensitive = input(false, { transform: booleanAttribute });

    /** Sort configuration for the column (e.g., custom comparer). */
    public readonly sortConfiguration = input<IgxGridLiteColumnSortConfiguration<T>>();

    /** Indicates whether the column is filterable. */
    public readonly filterable = input(false, { transform: booleanAttribute });

    /** Whether filter operations will be case sensitive. */
    public readonly filteringCaseSensitive = input(false, { transform: booleanAttribute });

    /** Custom header template for the column. */
    public readonly headerTemplate = input<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>();

    /** Custom cell template for the column. */
    public readonly cellTemplate = input<TemplateRef<IgxGridLiteCellTemplateContext<T>>>();

    //#endregion

    constructor() {
        effect((onCleanup) => {
            const directive = this.headerTemplateDirective();
            const template = this.headerTemplate() ?? directive?.template;
            if (template) {
                this.headerTemplateFunc = (ctx: IgcHeaderContext<T>) => {
                    if (!this.headerViewRef) {
                        const angularContext = {
                            ...ctx,
                            $implicit: ctx.column
                        }
                        this.headerViewRef = this._view.createEmbeddedView(template, angularContext);
                    }
                    return this.headerViewRef.rootNodes;
                };
            }
            onCleanup(() => {
                if (this.headerViewRef) {
                    this.headerViewRef.destroy();
                    this.headerViewRef = undefined;
                }
            })
        });

        effect((onCleanup) => {
            const directive = this.cellTemplateDirective();
            const template = this.cellTemplate() ?? directive?.template;
            if (template) {
                this.cellTemplateFunc = (ctx: IgcCellContext<T>) => {
                    const oldViewRef = this.cellViewRefs.get(ctx.row.data);
                    const angularContext = {
                        ...ctx,
                        $implicit: ctx.value,
                    } as IgxGridLiteCellTemplateContext<T>;
                    if (!oldViewRef) {
                        const newViewRef = this._view.createEmbeddedView(template, angularContext);
                        this.cellViewRefs.set(ctx.row.data, newViewRef);
                        return newViewRef.rootNodes;
                    }
                    Object.assign(oldViewRef.context, angularContext);
                    return oldViewRef.rootNodes;
                };
            }
            onCleanup(() => {
                this.cellViewRefs.forEach((viewRef) => {
                    viewRef.destroy();
                });
                this.cellViewRefs?.clear();
            });
        });
    }
}

/**
 * Context provided to the header template.
 */
export type IgxGridLiteHeaderTemplateContext<T extends object = any> = IgcHeaderContext<T> & {
    /**
     * The current configuration for the column.
     */
    $implicit: IgcHeaderContext<T>['column'];
}

/**
 * Context provided to the header template.
 */
export type IgxGridLiteCellTemplateContext<T extends object = any> = IgcCellContext<T> & {
    /**
     * The value from the data source for this cell.
     */
    $implicit: IgcCellContext<T>['value'];
};

1	import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, CUSTOM_ELEMENTS_SCHEMA, Directive, effect, EmbeddedViewRef, inject, input, TemplateRef, ViewContainerRef } from '@angular/core';
2	import { ColumnConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext, Keys, DataType } from 'igniteui-grid-lite';
3
4	/** Configuration object for grid columns. */
5	export type IgxGridLiteColumnConfiguration<T extends object = any> = ColumnConfiguration<T>;
6
7	export type IgxGridLiteColumnSortConfiguration<T extends object = any> = ColumnSortConfiguration<T>;
8
9
10	/**
11	* Directive providing type information for header template contexts.
12	* Use this directive on ng-template elements that render header templates.
13	*
14	* @example
15	* ```html
16	* <ng-template igxGridLiteHeader let-column>
17	* <div>{{column.header}}</div>
18	* </ng-template>
19	* ```
20	*/
21	@Directive({ selector: '[igxGridLiteHeader]' })
22	export class IgxGridLiteHeaderTemplateDirective<T extends object = any> {	3✔
UNCOV 23	public template = inject<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>(TemplateRef);	×
24
25	public static ngTemplateContextGuard<T extends object = any>(_: IgxGridLiteHeaderTemplateDirective<T>, ctx: any): ctx is IgxGridLiteHeaderTemplateContext<T> {
26	return true;	×
27	}
28	}
29
30	/**
31	* Directive providing type information for cell template contexts.
32	* Use this directive on ng-template elements that render cell templates.
33	*
34	* @example
35	* ```html
36	* <ng-template igxGridLiteCell let-value let-column="column" let-rowIndex="rowIndex" let-data="data">
37	* <div>{{value}}</div>
38	* </ng-template>
39	* ```
40	*/
41	@Directive({ selector: '[igxGridLiteCell]' })
42	export class IgxGridLiteCellTemplateDirective<T extends object = any> {	3✔
UNCOV 43	public template = inject<TemplateRef<IgxGridLiteCellTemplateContext<T>>>(TemplateRef);	×
44
45	public static ngTemplateContextGuard<T extends object = any>(_: IgxGridLiteCellTemplateDirective<T>, ctx: unknown): ctx is IgxGridLiteCellTemplateContext<T> {
46	return true;	×
47	}
48	}
49
50	@Component({
51	selector: 'igx-grid-lite-column',
52	changeDetection: ChangeDetectionStrategy.OnPush,
53	schemas: [CUSTOM_ELEMENTS_SCHEMA],
54	templateUrl: './grid-lite-column.component.html'
55	})
56	export class IgxGridLiteColumnComponent<T extends object = any> {	3✔
57
58	//#region Internal state
59
UNCOV 60	private readonly _view = inject(ViewContainerRef);	×
61
62	/** Reference to the embedded view for the header template and its template function. */
63	private headerViewRef?: EmbeddedViewRef<IgxGridLiteHeaderTemplateContext<T>>;
64	protected headerTemplateFunc?: (ctx: IgcHeaderContext<T>) => Node[];
65
66	/** Reference to the embedded view for the cell template and its template function. */
UNCOV 67	private cellViewRefs? = new Map<T, EmbeddedViewRef<IgxGridLiteCellTemplateContext<T>>>();	×
68	protected cellTemplateFunc?: (ctx: IgcCellContext<T>) => Node[];
69
70	/** Template directives used for inline templating */
UNCOV 71	private readonly headerTemplateDirective = contentChild(IgxGridLiteHeaderTemplateDirective<T>);	×
UNCOV 72	private readonly cellTemplateDirective = contentChild(IgxGridLiteCellTemplateDirective<T>);	×
73
74	//#endregion
75
76	//#region Inputs
77
78	/** The field from the data for this column. */
UNCOV 79	public readonly field = input<Keys<T>>();	×
80
81	/** The data type of the column's values. */
UNCOV 82	public readonly dataType = input<DataType>('string');	×
83
84	/** The header text of the column. */
UNCOV 85	public readonly header = input<string>();	×
86
87	/** The width of the column. */
UNCOV 88	public readonly width = input<string>();	×
89
90	/** Indicates whether the column is hidden. */
UNCOV 91	public readonly hidden = input(false, { transform: booleanAttribute });	×
92
93	/** Indicates whether the column is resizable. */
UNCOV 94	public readonly resizable = input(false, { transform: booleanAttribute });	×
95
96	/** Indicates whether the column is sortable. */
UNCOV 97	public readonly sortable = input(false, { transform: booleanAttribute });	×
98
99	/** Whether sort operations will be case sensitive. */
UNCOV 100	public readonly sortingCaseSensitive = input(false, { transform: booleanAttribute });	×
101
102	/** Sort configuration for the column (e.g., custom comparer). */
UNCOV 103	public readonly sortConfiguration = input<IgxGridLiteColumnSortConfiguration<T>>();	×
104
105	/** Indicates whether the column is filterable. */
UNCOV 106	public readonly filterable = input(false, { transform: booleanAttribute });	×
107
108	/** Whether filter operations will be case sensitive. */
UNCOV 109	public readonly filteringCaseSensitive = input(false, { transform: booleanAttribute });	×
110
111	/** Custom header template for the column. */
UNCOV 112	public readonly headerTemplate = input<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>();	×
113
114	/** Custom cell template for the column. */
UNCOV 115	public readonly cellTemplate = input<TemplateRef<IgxGridLiteCellTemplateContext<T>>>();	×
116
117	//#endregion
118
119	constructor() {
UNCOV 120	effect((onCleanup) => {	×
UNCOV 121	const directive = this.headerTemplateDirective();	×
UNCOV 122	const template = this.headerTemplate() ?? directive?.template;	×
UNCOV 123	if (template) {	×
UNCOV 124	this.headerTemplateFunc = (ctx: IgcHeaderContext<T>) => {	×
UNCOV 125	if (!this.headerViewRef) {	×
UNCOV 126	const angularContext = {	×
127	...ctx,
128	$implicit: ctx.column
129	}
UNCOV 130	this.headerViewRef = this._view.createEmbeddedView(template, angularContext);	×
131	}
UNCOV 132	return this.headerViewRef.rootNodes;	×
133	};
134	}
UNCOV 135	onCleanup(() => {	×
UNCOV 136	if (this.headerViewRef) {	×
UNCOV 137	this.headerViewRef.destroy();	×
UNCOV 138	this.headerViewRef = undefined;	×
139	}
140	})
141	});
142
UNCOV 143	effect((onCleanup) => {	×
UNCOV 144	const directive = this.cellTemplateDirective();	×
UNCOV 145	const template = this.cellTemplate() ?? directive?.template;	×
UNCOV 146	if (template) {	×
UNCOV 147	this.cellTemplateFunc = (ctx: IgcCellContext<T>) => {	×
UNCOV 148	const oldViewRef = this.cellViewRefs.get(ctx.row.data);	×
UNCOV 149	const angularContext = {	×
150	...ctx,
151	$implicit: ctx.value,
152	} as IgxGridLiteCellTemplateContext<T>;
UNCOV 153	if (!oldViewRef) {	×
UNCOV 154	const newViewRef = this._view.createEmbeddedView(template, angularContext);	×
UNCOV 155	this.cellViewRefs.set(ctx.row.data, newViewRef);	×
UNCOV 156	return newViewRef.rootNodes;	×
157	}
158	Object.assign(oldViewRef.context, angularContext);	×
159	return oldViewRef.rootNodes;	×
160	};
161	}
UNCOV 162	onCleanup(() => {	×
UNCOV 163	this.cellViewRefs.forEach((viewRef) => {	×
UNCOV 164	viewRef.destroy();	×
165	});
UNCOV 166	this.cellViewRefs?.clear();	×
167	});
168	});
169	}
170	}
171
172	/**
173	* Context provided to the header template.
174	*/
175	export type IgxGridLiteHeaderTemplateContext<T extends object = any> = IgcHeaderContext<T> & {
176	/**
177	* The current configuration for the column.
178	*/
179	$implicit: IgcHeaderContext<T>['column'];
180	}
181
182	/**
183	* Context provided to the header template.
184	*/
185	export type IgxGridLiteCellTemplateContext<T extends object = any> = IgcCellContext<T> & {
186	/**
187	* The value from the data source for this cell.
188	*/
189	$implicit: IgcCellContext<T>['value'];
190	};

IgniteUI / igniteui-angular / 26023601418

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous