# Empty

> Empty-state placeholder for when the underlying data is missing. Project a description and an optional `[wrEmptyActions]` row.

Source: https://ngwr.dev/reference/components/empty  
Kind: Display

## Installation

```angular-ts
import { WrEmpty } from 'ngwr/empty';

@Component({ imports: [WrEmpty] })
export class MyComponent {}
```

## Default

```angular-html
<wr-empty />
```

## With description and action

```angular-html
<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>
```

## 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` |