import { Component } from '@angular/core';
import { WrEmpty } from 'ngwr/empty';
@Component({ imports: [WrEmpty] })
export class MyComponent {}Empty
A placeholder for a view with no data.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Default
<wr-empty />With description and action
Project the text; put buttons in wrEmptyActions.
<wr-empty iconName="search" title="No results">
Try a different query or clear filters.
<ng-container wrEmptyActions>
<wr-btn (click)="reset()">Reset filters</wr-btn>
</ng-container>
</wr-empty>Without the illustration
[icon]="false" hides the artwork, for a placeholder inside a card or a table.
<wr-empty [icon]="false" title="No results">Try a different query.</wr-empty>API
| Name | Description | Type | Default |
|---|---|---|---|
icon | Render the built-in folder glyph. Pass false to show no icon at all. Ignored when iconName is set — the same contract as <wr-alert>. This used to be typed as an icon NAME, which it never was: whatever name you passed, the template drew the folder. Any truthy value still shows it, so nothing that compiled before behaves differently. | boolean | true |
iconName | Show any registered ngwr icon instead of the built-in glyph. | WrIconName | null | null |
title | Headline. Falls back to empty.noData from WrI18n, then 'No data'. | string | null | null |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/empty's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-empty-actions-gap | var(--wr-space-sm) | .wr-empty |
--wr-empty-actions-margin-top | var(--wr-space-sm) | .wr-empty |
--wr-empty-description-font-size | var(--wr-text-sm) | .wr-empty |
--wr-empty-gap | var(--wr-space-sm) | .wr-empty |
--wr-empty-icon-margin-bottom | var(--wr-space-xs) | .wr-empty |
--wr-empty-padding-x | var(--wr-space-lg) | .wr-empty |
--wr-empty-padding-y | var(--wr-space-xl) | .wr-empty |
--wr-empty-title-font-size | var(--wr-text-base) | .wr-empty |
--wr-empty-title-font-weight | var(--wr-font-weight-semibold) | .wr-empty |
Dependencies
| Built on | Icon |
|---|
See also
Component ResultA full-size outcome screen, with ready-made 404, 403 and 500 pages.Component SkeletonA placeholder block shown while content loads.Component TableRows of data with sorting, filtering, paging and custom cells.Component IconRenders an SVG icon you register by name; ngwr ships none of its own.