Web SDK documentation
  1. Components
  2. AlertOutletComponent

File

core/alert/alert-outlet.component.ts

Description

Alert outlet component shows all added alerts. It is used in the application's c8y-bootstrap component.

For applications which don’t use c8y-bootstrap component but want to display alerts via AlertService, a c8y-alert-outlet component needs to be added explicitly in the template.

Example:

 <div class="alerts">
   <c8y-alert-outlet></c8y-alert-outlet>
 </div>

Metadata

selector c8y-alert-outlet
templateUrl ./alert-outlet.component.html

Index

Properties
Methods
Accessors

Methods

close
close(alert: Alert)

Executes alert’s onClose method, if provided, and closes the alert.

Parameters :
Name Type Optional Description
alert Alert No

The alert which will be closed.
Returns : void
closeDetails
closeDetails()

Collapses alert's details.

Returns : void
getClass
getClass(alert: Alert)

Returns a CSS class for an alert depending on its type to style the corresponding alert component.

Parameters :
Name Type Optional
alert Alert No
Returns : any
hasDetails
hasDetails(alert: Alert)

Returns true if alert has extra detailedData or defines custom onDetail method.

Parameters :
Name Type Optional
alert Alert No
Returns : any
isDetailsShow
isDetailsShow(alert: Alert)

Returns true if details part of alert is expanded.

Parameters :
Name Type Optional
alert Alert No
Returns : any
showDetails
showDetails(alert: Alert)

Expands details part of particular alert, and collapses details for another alerts.

Parameters :
Name Type Optional Description
alert Alert No

The alert which details should be expanded.
Returns : any

Properties

detailDisplayedAlert
Type : any
Default value : {}

Currently displayed details of an alert. Only one alert’s details can be displayed at a time.”

Accessors

alerts
getalerts()

The array of current alerts.

Returns : BehaviorSubject<Alert[]> 
<div
  class="alert animated fadeInRightBig m-t-16"
  *ngFor="let alert of alerts | async"
  [ngClass]="[getClass(alert), isDetailsShow(alert) ? 'expanded' : '']"
>
  <button title="{{ 'Close' | translate }}" type="button" class="close" (click)="close(alert)">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">{{ 'Close' | translate }}</span>
  </button>

  <div *ngIf="!isTemplateRef(alert.text); else template(alert.text)">
    <strong *ngIf="!alert.allowHtml" [textContent]="alert.text | translate" class="message"></strong>
    <strong *ngIf="alert.allowHtml" [innerHTML]="alert.text | translate" class="message"></strong>
  </div>
  <p *ngIf="hasDetails(alert) && !isDetailsShow(alert)" class="text-muted m-t-8">
    <button
      title="{{ 'Show details' | translate }}"
      class="btn btn-clean"
      (click)="showDetails(alert)"
    >
      <i c8yIcon="chevron-down"></i>
      {{ 'Show details' | translate }}
    </button>
  </p>
  <p *ngIf="hasDetails(alert) && isDetailsShow(alert)" class="text-muted m-t-8">
    <button title="{{ 'Hide details' | translate }}" class="btn btn-clean" (click)="closeDetails()">
      <i c8yIcon="chevron-up"></i>
      {{ 'Hide details' | translate }}
    </button>
  </p>
  <div *ngIf="isDetailsShow(alert)">
    <div *ngIf="!isTemplateRef(detailDisplayedAlert.contents); else template(alert.detailedData)">
      <pre><code [textContent]="detailDisplayedAlert.contents | translate"></code></pre>
    </div>
  </div>
</div>

results matching ""

    No results matching ""