The empty state is used if a component or entity view has no data to show.
The <dt-empty-state> component is a placeholder for content that does not yet
exist. It consists of one or more items with each item containing an image, an
optional header and a short description text. It can be used within a
<dt-card> or an <dt-table>.
Loading interactive demo...
<dt-empty-state><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="No agent" /></dt-empty-state-item-img><dt-empty-state-item-titlearia-level="2"
>Optional Heading</dt-empty-state-item-title
>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item></dt-empty-state>exportclass EmptyStateDefaultExample {}
<dt-empty-state>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="No agent" />
</dt-empty-state-item-img>
<dt-empty-state-item-title aria-level="2"
>Optional Heading</dt-empty-state-item-title
>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item>
</dt-empty-state>
export class EmptyStateDefaultExample {}
To set the content for a empty state component, the following tags are
available:
<dt-empty-state-item> - An empty state item - an empty state card may
contain one or more such items
<dt-empty-state-item-img> - The image of an empty state card item
<dt-empty-state-item-title> - The (optional) heading of an empty state card
item
Imports
You have to import the DtEmptyStateModule when you want to use the
<dt-empty-state>:
@NgModule({
imports: [DtEmptyStateModule],
})
class MyModule {}
Variants
If multiple steps are needed in an explanation, they will be seperated with an
arrow. If a main call to action button is needed, add it to the card component.
This is mainly used in an empty entity view.
Loading interactive demo...
<dt-empty-state><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="No agent" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional Heading 1
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="No agent" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional Heading 2
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="No agent" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional Heading 3
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item></dt-empty-state>exportclass EmptyStateMultipleItemsExample {}
<dt-empty-state>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="No agent" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional Heading 1
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="No agent" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional Heading 2
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="No agent" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional Heading 3
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</dt-empty-state-item>
</dt-empty-state>
export class EmptyStateMultipleItemsExample {}
Empty state in use
The empty state is often used in combination with a card component (replaces the
deprecated cta card) or in a empty table or
chart.
Loading interactive demo...
<dt-card><dt-card-title>
Start monitoring your Cloud Foundry foundation VMs
</dt-card-title><dt-card-title-actions><buttondt-icon-buttonvariant="secondary"color="cta"aria-label="Close card"
><dt-iconname="abort"></dt-icon></button></dt-card-title-actions><dt-empty-state><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="My Asset" /></dt-empty-state-item-img>
Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to
your Cloud Foundry foundation VMs. Get monitoring insights into all
Cloud Foundry components including Diego cells, Gorouters, and more.
Benefit from automatic monitoring of Cloud Foundry applications, down
to the code and query level, thanks to built-in auto-injection for
Garden-runC containers.
<aclass="dt-link"color="cta"i18n>Read more...</a><dt-empty-state-footer-actions><adt-buttoncolor="cta"i18n>View release</a><adt-buttoncolor="cta"i18n>More info</a></dt-empty-state-footer-actions></dt-empty-state-item></dt-empty-state></dt-card>exportclass EmptyStateInCardExample {}
<dt-card>
<dt-card-title>
Start monitoring your Cloud Foundry foundation VMs
</dt-card-title>
<dt-card-title-actions>
<button
dt-icon-button
variant="secondary"
color="cta"
aria-label="Close card"
>
<dt-icon name="abort"></dt-icon>
</button>
</dt-card-title-actions>
<dt-empty-state>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="My Asset" />
</dt-empty-state-item-img>
Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to
your Cloud Foundry foundation VMs. Get monitoring insights into all
Cloud Foundry components including Diego cells, Gorouters, and more.
Benefit from automatic monitoring of Cloud Foundry applications, down
to the code and query level, thanks to built-in auto-injection for
Garden-runC containers.
<a class="dt-link" color="cta" i18n>Read more...</a>
<dt-empty-state-footer-actions>
<a dt-button color="cta" i18n>View release</a>
<a dt-button color="cta" i18n>More info</a>
</dt-empty-state-footer-actions>
</dt-empty-state-item>
</dt-empty-state>
</dt-card>
export class EmptyStateInCardExample {}
The following example shows a CTA card with multiple empty state items.
Loading interactive demo...
<dt-card><dt-card-title>CTA card title</dt-card-title><dt-card-title-actions><buttondt-icon-buttonvariant="secondary"color="cta"aria-label="Close card"
><dt-iconname="abort"></dt-icon></button></dt-card-title-actions><dt-empty-state><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="My Asset" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional heading 1
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="My Asset" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional heading 2
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item><dt-empty-state-item><dt-empty-state-item-img><imgsrc="/assets/cta-noagent.svg"alt="My Asset" /></dt-empty-state-item-img><dt-empty-state-item-title>
Optional heading 3
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item></dt-empty-state><dt-card-footer-actions><adt-buttoncolor="cta"i18n>View release</a><adt-buttoncolor="cta"i18n>More info</a></dt-card-footer-actions></dt-card>exportclass EmptyStateMultipleItemsInCardExample {}
<dt-card>
<dt-card-title>CTA card title</dt-card-title>
<dt-card-title-actions>
<button
dt-icon-button
variant="secondary"
color="cta"
aria-label="Close card"
>
<dt-icon name="abort"></dt-icon>
</button>
</dt-card-title-actions>
<dt-empty-state>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="My Asset" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional heading 1
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="My Asset" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional heading 2
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item>
<dt-empty-state-item>
<dt-empty-state-item-img>
<img src="/assets/cta-noagent.svg" alt="My Asset" />
</dt-empty-state-item-img>
<dt-empty-state-item-title>
Optional heading 3
</dt-empty-state-item-title>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.
</dt-empty-state-item>
</dt-empty-state>
<dt-card-footer-actions>
<a dt-button color="cta" i18n>View release</a>
<a dt-button color="cta" i18n>More info</a>
</dt-card-footer-actions>
</dt-card>
export class EmptyStateMultipleItemsInCardExample {}