core/common/empty-state/empty-state.component.ts

Description

A component to show generic empty state. Title and subtitle should be used with translate pipe to mark strings for translation. Component can be displayed vertically (default) or horizontally. Additional markup elements can be placed inside the tag.

Example :

<c8y-ui-empty-state
  [icon]="'c8y-icon'"
  [title]="'Place your title here' | translate"
  [subtitle]="'Place your subtitle here' | translate"
  [horizontal]="true"
>
  (...)
</c8y-ui-empty-state>

Example

Metadata

selector	`c8y-ui-empty-state`
standalone	`true`
imports	`NgIf` `NgClass` `IconDirective` `NgTemplateOutlet` `C8yTranslatePipe`
templateUrl	`./empty-state.component.html`

Relationships

Used by

Depends on

NgIf
NgClass
IconDirective
NgTemplateOutlet
C8yTranslatePipe

<div class="c8y-empty-state" [ngClass]="{ 'c8y-empty-state--horizontal': horizontal }">
  <i [c8yIcon]="icon" class="c8y-icon-duocolor"></i>

  <ng-container *ngIf="!horizontal">
    <div>
      <h3 class="text-medium">{{ title | translate }}</h3>
      <p class="p-b-16" *ngIf="subtitle">{{ subtitle | translate }}</p>
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
  </ng-container>

  <ng-container *ngIf="horizontal">
    <div class="d-flex d-col j-c-center">
      <p class="text-medium a-s-start">{{ title | translate }}</p>
      <p *ngIf="subtitle" class="small a-s-start">{{ subtitle | translate }}</p>
      <div class="small a-s-start">
        <ng-container *ngTemplateOutlet="content"></ng-container>
      </div>
    </div>
  </ng-container>

  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
</div>