core/alert/alert.component.ts
Alert component allows creating alert with complex view.
OnDestroy
Alert
| selector | c8y-alert |
| templateUrl | ./alert.component.html |
Properties |
Methods |
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. |
| 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
|
| 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 allows creating alert with complex view.
@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><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>