src/app/shared/components/warning-panel/warning-panel.component.ts
| selector | cd-warning-panel |
| styleUrls | ./warning-panel.component.scss |
| templateUrl | ./warning-panel.component.html |
Inputs |
| title | |
Default value : 'Warning'
|
|
|
The title to be displayed. Defaults to 'Warning'. |
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'cd-warning-panel',
templateUrl: './warning-panel.component.html',
styleUrls: ['./warning-panel.component.scss']
})
export class WarningPanelComponent {
/**
* The title to be displayed. Defaults to 'Warning'.
* @type {string}
*/
@Input()
title = 'Warning';
}
<alert type="warning">
<table>
<tr>
<td rowspan="2" class="warning-panel-alert-icon">
<i class="fa fa-3x fa-warning alert-warning"
aria-hidden="true"></i>
</td>
<td class="warning-panel-alert-title">
{{ title }}
</td>
</tr>
<tr>
<td class="warning-panel-alert-text">
<ng-content></ng-content>
</td>
</tr>
</table>
</alert>
./warning-panel.component.scss
.warning-panel-alert-icon {
vertical-align: top;
padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
}
.warning-panel-alert-title {
font-weight: bold;
}
.warning-panel-alert-text {
}