File

core/alert/alert.component.ts

Description

Alert component allows creating alert with complex view.

Implements

OnDestroy Alert

Metadata

Index

Properties
Methods
Inputs

Inputs

onClose
Type : function

Function to call if user clicks on the close button.

onDetail
Type : function

Function to call if user clicks on the detail button.

type
Type : "success" | "warning" | "danger" | "info" | "system"

The type of the alert.

Methods

ngAfterViewInit
ngAfterViewInit()

AlertComponent adds new alert to collection stored in alertService after view init.

Returns : void
ngOnDestroy
ngOnDestroy()

AlertComponent removes alert from collection stored in alertService on destroy component.

Returns : void

Properties

containDetailsComponent
Type : AlertDetailsComponent
Decorators :
@ContentChild(AlertDetailsComponent, {static: false})

Content of AlertDetailsComponent is displayed as alertDetails.

detailedData
Decorators :
@ViewChild('detailedData', {static: false})

Detailed information to display.

text
Decorators :
@ViewChild('text', {static: false})

The text templateRef to display message.

Alert component

Alert component allows creating alert with complex view.

Usage examples

Basic usage

@Component({
  selector: 'my-custom',
  templateUrl: './my-custom.component.html'
})
export class MyCustomComponent {
  showAlert = false;
  onClose = () => {
    console.log('on close');
  };
}
<div>
  <span>This is my-custom view.</span>
  <button type="button" (click)="showAlert=true">Show alert</button>
</div>

<c8y-alert *ngIf="showAlert" [type]="'danger'" [onClose]="onClose">
  <p><span style="color:red">Danger message.</span></p>
  <button type="button" (click)="showAlert=false">Hide alert</button>
</c8y-alert>

Alert with details

<c8y-alert *ngIf="showAlert" [type]="'warning'">
  <c8y-alert-text>Alert message</c8y-alert-text>
  <c8y-alert-details>Alert details</c8y-alert-details>
</c8y-alert>

<ng-template #text>
  <ng-content select="c8y-alert-text"></ng-content>
  <ng-content></ng-content>
</ng-template>
<ng-template #detailedData>
  <ng-content select="c8y-alert-details"></ng-content>
</ng-template>

results matching ""

    No results matching ""