alfresco-ng2-components/docs/core/components/empty-content.component.md
Andy Stark 5fc05da7aa [ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Manual fixes to core doc file links

* [ADF-4152] Further automatic + manual link tidying
2019-03-12 14:20:20 +00:00

76 lines
2.2 KiB
Markdown

---
Title: Empty Content Component
Added: v2.4.0
Status: Active
Last reviewed: 2019-02-01
---
# [Empty Content Component](../../../lib/core/templates/empty-content/empty-content.component.ts "Defined in empty-content.component.ts")
Provides a generic "Empty Content" placeholder for components.
![Favorites screen](../../docassets/images/empty-content-favorites.png)
## Basic usage
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| icon | `string` | "cake" | Material Icon to use. |
| subtitle | `string` | "" | String or Resource Key for the subtitle. |
| title | `string` | "" | String or Resource Key for the title. |
## Details
### Usage examples
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
![Favorites screen](../../docassets/images/empty-content-favorites.png)
You can also use multiple lines instead of the subtitle section:
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="delete"
title="APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE">
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
![Trashcan screen](../../docassets/images/empty-content-trashcan.png)
## See also
- [Error content component](error-content.component.md)