OverflowHiddenComponent
A layout component that switches rendered content based on available space.
When there is sufficient space, the yuvDefaultSlot content is displayed. Once the default content would overflow its container, it is hidden and the optional yuvOverflowSlot content is shown in its place. If no overflow slot is provided, the component simply disappears to free up space for surrounding components.
This can also be used to remove certain elements on small screens, making layouts more adaptive.
Overflow detection uses an {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver | IntersectionObserver} that watches whether the default slot is fully visible within the host element. The host element receives the CSS class overflowing while content is hidden.
Example :
<yuv-overflow-hidden>
<ng-template #yuvDefaultSlot>
<my-full-component />
</ng-template>
<!-- optional: shown instead of the default slot when space is insufficient -->
<ng-template #yuvOverflowSlot>
<my-compact-component />
</ng-template>
</yuv-overflow-hidden>Component Metadata
Section titled “Component Metadata”Selector: yuv-overflow-hidden
Standalone: No
Implements: AfterViewInit, OnDestroy
Properties
Section titled “Properties”defaultSlot
Section titled “defaultSlot”Type: unknown
Default Value: contentChild.required<TemplateRef<any>>('yuvDefaultSlot')
Required content template rendered when there is sufficient space.Declare the template with the variable #yuvDefaultSlot inside the component’s content projection area.
overflow
Section titled “overflow”Type: unknown
Default Value: signal<boolean>(false)
Reactive signal indicating whether the default slot content is currently overflowing.true when the default content no longer fits within the host element and is hidden; false when the default content is fully visible.
overflowSlot
Section titled “overflowSlot”Type: unknown
Default Value: contentChild<TemplateRef<any>>('yuvOverflowSlot')
Optional content template rendered when the default slot overflows.Declare the template with the variable #yuvOverflowSlot inside the component’s content projection area. When omitted, the component becomes invisible once its default content no longer fits.