src/app/shared/props-table/props-table.component.ts
Component used to display the properties of an alarm
| selector | app-props-table |
| styleUrls | ./props-table.component.scss |
| templateUrl | ./props-table.component.html |
Methods |
Inputs |
constructor()
|
|
Builds an instance of the component |
| alarm | |
Type : Alarm
|
|
|
Alarm object associated to the component |
|
| ngOnInit |
ngOnInit()
|
|
Method executed when the component is initiated
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
import { Alarm} from '../../data/alarm';
/**
* Component used to display the properties of an alarm
*/
@Component({
selector: 'app-props-table',
templateUrl: './props-table.component.html',
styleUrls: ['./props-table.component.scss']
})
export class PropsTableComponent implements OnInit {
/**
* Alarm object associated to the component
*/
@Input() alarm: Alarm;
/**
* Builds an instance of the component
*/
constructor() { }
/**
* Method executed when the component is initiated
*/
ngOnInit() {
}
}
<div class=props-table-container>
<table>
<tr *ngFor="let prop of alarm.properties | keyvalue">
<th> {{ prop.key }}: </th>
<td> {{ prop.value }} </td>
</tr>
</table>
</div>
./props-table.component.scss
.props-table-container {
table, th, td {
border-width: 0px;
border-style: solid;
}
table {
vertical-align: top;
width: 100%;
}
th, td {
vertical-align: top;
padding: 0px 4px;
}
th {
width: fit-content;
}
td {
max-width: 320px;
width: 100%;
word-wrap: break-word;
}
}