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