import { Component, Input } from '@angular/core';
import { AppStorageInfo } from './../../download-manager.interface';
@Component({
selector: 'app-downloads-header',
templateUrl: './downloads-header.component.html',
styleUrls: ['./downloads-header.component.scss'],
})
export class DownloadsHeaderComponent {
@Input() storageInfo: AppStorageInfo;
@Input() appName: string;
constructor() { }
}
<div class="sb-view-all-container">
<div class="sb-view-all-items">
<div class="sb-view-all-title width-100">
<h4 class="page-heading px-4">{{'TAB_5' | translate}}</h4>
<div class="d-flex">
<div class="pull-left flex-60 px-4">{{'SPACE_TAKEN' | translate: {'%s': appName } }}:
<strong>{{storageInfo?.usedSpace | fileSize}}</strong></div>
<div class="flex-40 px-4">
<span class="pull-right">{{'AVAILABLE' | translate}}: {{storageInfo?.availableSpace | fileSize}}</span>
</div>
</div>
</div>
</div>
</div>
.flex-60{
flex: 0 0 60%;
}
.flex-40{
flex: 0 0 40%;
}
@media (max-width: 360px) {
.sb-view-all-title{
.d-flex{
font-size: 0.75rem;
}
}
}
Legend
Html element with directive