core/alert/alert-outlet.component.ts
| selector | c8y-alert-outlet |
| standalone | true |
| imports |
NgFor
NgClass
IconDirective
NgIf
C8yTranslatePipe
AsyncPipe
|
| 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
class="close"
title="{{ 'Close' | translate }}"
type="button"
(click)="close(alert)"
>
<span
aria-hidden="true"
data-cy="alert--close-alert-message"
>
<i c8yIcon="times"></i>
</span>
<span class="sr-only">{{ 'Close' | translate }}</span>
</button>
<div *ngIf="!isTemplateRef(alert.text); else template(alert.text)">
<strong
class="message"
*ngIf="!alert.allowHtml"
[textContent]="alert.text | translate"
></strong>
<strong
class="message"
*ngIf="alert.allowHtml"
[innerHTML]="alert.text | translate"
></strong>
</div>
<p
class="text-muted m-t-8"
*ngIf="hasDetails(alert) && !isDetailsShow(alert)"
>
<button
class="btn btn-clean"
title="{{ 'Show details' | translate }}"
(click)="showDetails(alert)"
>
<i c8yIcon="chevron-down"></i>
{{ 'Show details' | translate }}
</button>
</p>
<p
class="text-muted m-t-8"
*ngIf="hasDetails(alert) && isDetailsShow(alert)"
>
<button
class="btn btn-clean"
title="{{ 'Hide details' | translate }}"
(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>