import { KbqEmptyStateModule } from '@koobiq/components/empty-state';Placeholder rendered in place of content that is empty, unavailable or failed to load. Projects an illustration, a title, a text and an actions row, in that order.
<kbq-empty-state> <h2 kbq-empty-state-title>No groups</h2> <div kbq-empty-state-text>Agents can be grouped and given the same policies</div> </kbq-empty-state>
The host has no intrinsic height — it grows as a flex item and is otherwise as tall as its
content, which leaves alignTop indistinguishable from the default. Give the host or its
container a height for the alignment to mean anything.
For an empty state inserted dynamically, add role="status" — or role="alert" for the error
variant — on the host so assistive technology announces it. See the component guide.
@Component({ selector: 'kbq-empty-state', exportAs: 'kbqEmptyState' }) class KbqEmptyState implements KbqEmptyStateContext { readonly errorColor = input<boolean>(false); readonly alignTop = input<boolean>(false); readonly size = input<KbqDefaultSizes>('normal'); }
errorColorboolean Whether the title, the text and the projected icon render in the error color. Defaults to false.
alignTopboolean Whether the content sits at the top of the host instead of its center. Defaults to false.
sizeKbqDefaultSizes Size tier of the placeholder: compact, normal or big. Drives every padding and offset,
the maximum width of the title and the text, and their typography. Defaults to normal.
Actions slot of kbq-empty-state, rendered below the text. Holds buttons, links or pseudo-links.
@Directive({ selector: '[kbq-empty-state-actions]' }) class KbqEmptyStateActions {}
Illustration slot of kbq-empty-state. Holds an icon, an image or any other element.
A kbq-icon-item follows the empty state's errorColor, whether the directive sits on the icon
itself or wraps it.
@Directive({ selector: '[kbq-empty-state-icon]' }) class KbqEmptyStateIcon {}
Text slot of kbq-empty-state, rendered below the title.
@Directive({ selector: '[kbq-empty-state-text]' }) class KbqEmptyStateText {}
Title slot of kbq-empty-state, rendered below the illustration.
It carries heading typography — subheading at size="normal", headline at size="big" — so
the host element should be a real heading of the level the surrounding page calls for:
<h2 kbq-empty-state-title>.
@Directive({ selector: '[kbq-empty-state-title]' }) class KbqEmptyStateTitle {}
The part of kbq-empty-state its projected slots follow.
interface KbqEmptyStateContext { readonly errorColor: Signal<boolean>; }
errorColorSignal<boolean> Whether the empty state renders in the error color.