core/alert/alert-outlet.component.ts
| selector | c8y-alert-outlet |
| templateUrl | ./alert-outlet.component.html |
Properties |
|
Methods |
Accessors |
| close | ||||||||
close(alert: Alert)
|
||||||||
|
Executes alert’s onClose method, if provided, and closes the alert.
Parameters :
Returns :
void
|
| getClass | ||||||
getClass(alert: Alert)
|
||||||
|
Returns a CSS class for an alert depending on its type to style the corresponding alert component.
Parameters :
Returns :
any
|
| closeDetails |
closeDetails()
|
|
Collapses alert's details.
Returns :
void
|
| hasDetails | ||||||
hasDetails(alert: Alert)
|
||||||
|
Returns true if alert has extra detailedData or defines custom onDetail method.
Parameters :
Returns :
any
|
| isDetailsShow | ||||||
isDetailsShow(alert: Alert)
|
||||||
|
Returns true if details part of alert is expanded.
Parameters :
Returns :
any
|
| showDetails | ||||||||
showDetails(alert: Alert)
|
||||||||
|
Expands details part of particular alert, and collapses details for another alerts.
Parameters :
Returns :
any
|
| Public alertService |
Type : AlertService
|
| detailDisplayedAlert |
Type : any
|
Default value : {}
|
|
Currently displayed details of an alert. Only one alert’s details can be displayed at a time. |
| alerts |
getalerts()
|
|
The array of current alerts.
Returns :
BehaviorSubject<Alert[]>
|
<div
class="alert animated fadeInRightBig m-t-16"
data-cy="c8y-alert--message"
*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"><i c8yIcon="times"></i></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>