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