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

5.0

/projects/igniteui-angular/carousel/src/carousel/slide.component.ts

import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, inject } from '@angular/core';
import { Subject } from 'rxjs';
import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-base';

/**
 * A slide component that usually holds an image and/or a caption text.
 * IgxSlideComponent is usually a child component of an IgxCarouselComponent.
 *
 * ```
 * <igx-slide [input bindings] >
 *    <ng-content></ng-content>
 * </igx-slide>
 * ```
 *
 * @export
 */
@Component({
    selector: 'igx-slide',
    templateUrl: 'slide.component.html',
    standalone: true
})
export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase {
    private elementRef = inject(ElementRef);

    /**
     * Gets/sets the `index` of the slide inside the carousel.
     * ```html
     * <igx-carousel>
     *  <igx-slide index="1"></igx-slide>
     * <igx-carousel>
     * ```
     *
     * @memberOf IgxSlideComponent
     */
    @Input() public index: number;

    /**
     * Gets/sets the target `direction` for the slide.
     * ```html
     * <igx-carousel>
     *  <igx-slide direction="NEXT"></igx-slide>
     * <igx-carousel>
     * ```
     *
     * @memberOf IgxSlideComponent
     */
    @Input() public direction: CarouselAnimationDirection;

    @Input()
    public total: number;

    /**
     * Returns the `tabIndex` of the slide component.
     * ```typescript
     * let tabIndex =  this.carousel.tabIndex;
     * ```
     *
     * @memberof IgxSlideComponent
     * @deprecated in version 19.2.0.
     */
    @HostBinding('attr.tabindex')
    public get tabIndex() {
        return this.active ? 0 : null;
    }

    /**
     * @hidden
     */
    @HostBinding('attr.id')
    public id: string;

    /**
     * Returns the `role` of the slide component.
     * By default is set to `tabpanel`
     *
     * @memberof IgxSlideComponent
     */
    @HostBinding('attr.role')
    public tab = 'tabpanel';

    /** @hidden */
    @HostBinding('attr.aria-labelledby')
    public ariaLabelledBy;

    /**
     * Returns the class of the slide component.
     * ```typescript
     * let class =  this.slide.cssClass;
     * ```
     *
     * @memberof IgxSlideComponent
     */
    @HostBinding('class.igx-slide')
    public cssClass = 'igx-slide';

    /**
     * Gets/sets the `active` state of the slide.
     * ```html
     * <igx-carousel>
     *  <igx-slide [active] ="false"></igx-slide>
     * <igx-carousel>
     * ```
     *
     * Two-way data binding.
     * ```html
     * <igx-carousel>
     *  <igx-slide [(active)] ="model.isActive"></igx-slide>
     * <igx-carousel>
     * ```
     *
     * @memberof IgxSlideComponent
     */
    @HostBinding('class.igx-slide--current')
    @Input({ transform: booleanAttribute })
    public get active(): boolean {
        return this._active;
    }

    public set active(value) {
        this._active = value;
        this.activeChange.emit(this._active);
    }

    @HostBinding('class.igx-slide--previous')
    @Input({ transform: booleanAttribute }) public previous = false;

    /**
     * @hidden
     */
    @Output() public activeChange = new EventEmitter<boolean>();

    private _active = false;
    private _destroy$ = new Subject<boolean>();

    /**
     * Returns a reference to the carousel element in the DOM.
     * ```typescript
     * let nativeElement =  this.slide.nativeElement;
     * ```
     *
     * @memberof IgxSlideComponent
     */
    public get nativeElement() {
        return this.elementRef.nativeElement;
    }

    /**
     * @hidden
     */
    public get isDestroyed(): Subject<boolean> {
        return this._destroy$;
    }

    public ngAfterContentChecked() {
        this.id = `panel-${this.index}`;
        this.ariaLabelledBy = `tab-${this.index}-${this.total}`;
    }

    /**
     * @hidden
     */
    public ngOnDestroy() {
        this._destroy$.next(true);
        this._destroy$.complete();
    }
}

1	import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, inject } from '@angular/core';
2	import { Subject } from 'rxjs';
3	import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-base';
4
5	/**
6	* A slide component that usually holds an image and/or a caption text.
7	* IgxSlideComponent is usually a child component of an IgxCarouselComponent.
8	*
9	* ```
10	* <igx-slide [input bindings] >
11	* <ng-content></ng-content>
12	* </igx-slide>
13	* ```
14	*
15	* @export
16	*/
17	@Component({
18	selector: 'igx-slide',
19	templateUrl: 'slide.component.html',
20	standalone: true
21	})
22	export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase {	3✔
UNCOV 23	private elementRef = inject(ElementRef);	×
24
25	/**
26	* Gets/sets the `index` of the slide inside the carousel.
27	* ```html
28	* <igx-carousel>
29	* <igx-slide index="1"></igx-slide>
30	* <igx-carousel>
31	* ```
32	*
33	* @memberOf IgxSlideComponent
34	*/
35	@Input() public index: number;
36
37	/**
38	* Gets/sets the target `direction` for the slide.
39	* ```html
40	* <igx-carousel>
41	* <igx-slide direction="NEXT"></igx-slide>
42	* <igx-carousel>
43	* ```
44	*
45	* @memberOf IgxSlideComponent
46	*/
47	@Input() public direction: CarouselAnimationDirection;
48
49	@Input()
50	public total: number;
51
52	/**
53	* Returns the `tabIndex` of the slide component.
54	* ```typescript
55	* let tabIndex = this.carousel.tabIndex;
56	* ```
57	*
58	* @memberof IgxSlideComponent
59	* @deprecated in version 19.2.0.
60	*/
61	@HostBinding('attr.tabindex')
62	public get tabIndex() {
UNCOV 63	return this.active ? 0 : null;	×
64	}
65
66	/**
67	* @hidden
68	*/
69	@HostBinding('attr.id')
70	public id: string;
71
72	/**
73	* Returns the `role` of the slide component.
74	* By default is set to `tabpanel`
75	*
76	* @memberof IgxSlideComponent
77	*/
78	@HostBinding('attr.role')
UNCOV 79	public tab = 'tabpanel';	×
80
81	/** @hidden */
82	@HostBinding('attr.aria-labelledby')
83	public ariaLabelledBy;
84
85	/**
86	* Returns the class of the slide component.
87	* ```typescript
88	* let class = this.slide.cssClass;
89	* ```
90	*
91	* @memberof IgxSlideComponent
92	*/
93	@HostBinding('class.igx-slide')
UNCOV 94	public cssClass = 'igx-slide';	×
95
96	/**
97	* Gets/sets the `active` state of the slide.
98	* ```html
99	* <igx-carousel>
100	* <igx-slide [active] ="false"></igx-slide>
101	* <igx-carousel>
102	* ```
103	*
104	* Two-way data binding.
105	* ```html
106	* <igx-carousel>
107	* <igx-slide [(active)] ="model.isActive"></igx-slide>
108	* <igx-carousel>
109	* ```
110	*
111	* @memberof IgxSlideComponent
112	*/
113	@HostBinding('class.igx-slide--current')
114	@Input({ transform: booleanAttribute })
115	public get active(): boolean {
UNCOV 116	return this._active;	×
117	}
118
119	public set active(value) {
UNCOV 120	this._active = value;	×
UNCOV 121	this.activeChange.emit(this._active);	×
122	}
123
124	@HostBinding('class.igx-slide--previous')
UNCOV 125	@Input({ transform: booleanAttribute }) public previous = false;	×
126
127	/**
128	* @hidden
129	*/
UNCOV 130	@Output() public activeChange = new EventEmitter<boolean>();	×
131
UNCOV 132	private _active = false;	×
UNCOV 133	private _destroy$ = new Subject<boolean>();	×
134
135	/**
136	* Returns a reference to the carousel element in the DOM.
137	* ```typescript
138	* let nativeElement = this.slide.nativeElement;
139	* ```
140	*
141	* @memberof IgxSlideComponent
142	*/
143	public get nativeElement() {
UNCOV 144	return this.elementRef.nativeElement;	×
145	}
146
147	/**
148	* @hidden
149	*/
150	public get isDestroyed(): Subject<boolean> {
UNCOV 151	return this._destroy$;	×
152	}
153
154	public ngAfterContentChecked() {
UNCOV 155	this.id = `panel-${this.index}`;	×
UNCOV 156	this.ariaLabelledBy = `tab-${this.index}-${this.total}`;	×
157	}
158
159	/**
160	* @hidden
161	*/
162	public ngOnDestroy() {
UNCOV 163	this._destroy$.next(true);	×
UNCOV 164	this._destroy$.complete();	×
165	}
166	}

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