src/app/shared/components/error-panel/error-panel.component.ts
| selector | cd-error-panel |
| styleUrls | ./error-panel.component.scss |
| templateUrl | ./error-panel.component.html |
Inputs |
Outputs |
| title | |
Default value : 'Error'
|
|
|
The title to be displayed. Defaults to 'Error'. |
|
| backAction | |
Type : EventEmitter
|
|
|
The event that is triggered when the 'Back' button is pressed. |
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'cd-error-panel',
templateUrl: './error-panel.component.html',
styleUrls: ['./error-panel.component.scss']
})
export class ErrorPanelComponent {
/**
* The title to be displayed. Defaults to 'Error'.
* @type {string}
*/
@Input()
title = 'Error';
/**
* The event that is triggered when the 'Back' button is pressed.
* @type {EventEmitter<any>}
*/
@Output()
backAction = new EventEmitter();
}
<alert type="danger">
<table>
<tr>
<td rowspan="2"
class="error-panel-alert-icon">
<i class="fa fa-3x fa-times-circle alert-danger"
aria-hidden="true"></i>
</td>
<td class="error-panel-alert-title">
{{ title }}
</td>
</tr>
<tr>
<td class="error-panel-alert-text">
<ng-content></ng-content>
</td>
</tr>
</table>
</alert>
<div class="button-group text-right"
*ngIf="backAction.observers.length > 0">
<button class="btn btn-sm btn-default tc_backButton"
type="button"
(click)="backAction.emit()"
autofocus
i18n>Back</button>
</div>
./error-panel.component.scss
.error-panel-alert-icon {
vertical-align: top;
padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
}
.error-panel-alert-title {
font-weight: bold;
}