Infinite Scroll & Overflow
Two small layout directives with no visual output of their own — load more when an element enters the viewport, and count how many items actually fit before a "more" trigger.
Neither directive renders anything: InfinityScrollDirective fires an event when its host becomes visible,
and the overflowManager family hides whichever items do not fit and reports how many do.
Infinite scroll
import { Component } from "@angular/core";
import { InfinityScrollDirective } from "@sinequa/atomic-angular";
@Component({
selector: "results-list",
imports: [InfinityScrollDirective],
template: `<div infinity-scroll (onScroll)="loadMore()"></div>`,
})
export class ResultsListComponent {
protected loadMore() {
/* ... */
}
}Built on IntersectionObserver: onScroll fires once the host element enters the viewport, typically a thin
sentinel <div> placed at the end of a list.
Prop
Type
Overflow manager
Three directives working together: overflowManager on the container, overflowItem on each candidate item,
and overflowStop on the trigger whose space must always stay clear (a "+N more" button, typically).
import { Component } from "@angular/core";
import { OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective } from "@sinequa/atomic-angular";
@Component({
selector: "tag-row",
imports: [OverflowManagerDirective, OverflowItemDirective, OverflowStopDirective],
template: `
<div class="flex gap-2" overflowManager (count)="onCount($event)">
<ul>
@for (item of tags; track item) {
<li overflowItem>{{ item }}</li>
}
</ul>
<div overflowStop>more…</div>
</div>
`,
})
export class TagRowComponent {
protected readonly tags = ["alpha", "beta", "gamma", "delta", "epsilon"];
protected onCount(count: number) {
console.log(`${count} tag(s) fit`);
}
}The boundary measured is the container's own content edge, not the stop element's position — which keeps the
measurement correct even inside a flex layout, since nothing depends on a sibling staying where expected. The
stop element's size is reserved only once not every item fits (unless reserveStop forces it to always be
reserved), so the last visible item never overlaps the trigger.
Prop
Type