File
Implements
Metadata
| selector |
cd-usage-bar |
| styleUrls |
./usage-bar.component.scss |
| templateUrl |
./usage-bar.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnChanges
|
ngOnChanges()
|
|
|
|
|
import { Component, Input, OnChanges } from '@angular/core';
@Component({
selector: 'cd-usage-bar',
templateUrl: './usage-bar.component.html',
styleUrls: ['./usage-bar.component.scss']
})
export class UsageBarComponent implements OnChanges {
@Input()
totalBytes: number;
@Input()
usedBytes: number;
usedPercentage: number;
freePercentage: number;
freeBytes: number;
constructor() {}
ngOnChanges() {
this.usedPercentage = Math.round((this.usedBytes / this.totalBytes) * 100);
this.freePercentage = 100 - this.usedPercentage;
this.freeBytes = this.totalBytes - this.usedBytes;
}
}
<ng-template #usageTooltipTpl>
<table>
<tr>
<td class="text-left">Used: </td>
<td class="text-right"><strong> {{ usedBytes | dimlessBinary }}</strong></td>
</tr>
<tr>
<td class="text-left">Free: </td>
<td class="'text-right"><strong>{{ freeBytes | dimlessBinary }}</strong></td>
</tr>
</table>
</ng-template>
<div class="progress oaprogress"
data-placement="left"
[tooltip]="usageTooltipTpl">
<div class="progress-bar progress-bar-info"
role="progressbar"
[style.width]="usedPercentage + '%'">
<span>{{ usedPercentage }}%</span>
</div>
<div class="progress-bar progress-bar-freespace"
role="progressbar"
[style.width]="freePercentage + '%'">
</div>
</div>
Legend
Html element with directive