src/app/components/progress/progress.component.ts
| selector | app-progress |
| styleUrls | progress.component.css |
| templateUrl | ./progress.component.html |
Methods |
Inputs |
constructor()
|
currentVal
|
Type:
Default value: |
maxVal
|
Type:
Default value: |
theme
|
Type:
Default value: |
| computedTheme |
computedTheme()
|
|
Returns :
any
|
| getDashArray |
getDashArray()
|
|
Returns :
{}
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| percentage |
percentage()
|
|
Returns :
any
|
| progress | ||||||
progress(val: number)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
import { Theme } from './theme.enum';
@Component({
selector: 'app-progress',
templateUrl: './progress.component.html',
styleUrls: ['./progress.component.css']
})
export class ProgressComponent implements OnInit {
@Input() maxVal:number=0;
@Input() currentVal:number=0;
@Input() theme:Theme = Theme.Blue;
constructor() { }
ngOnInit() {
}
computedTheme(){
let p = this.percentage();
return p > 100 ? Theme.Red:this.theme;
}
getDashArray(){
let p = this.percentage();
return [p, 100000]
}
percentage(){
return Math.round(this.currentVal*100/this.maxVal);
}
progress(val:number){
this.currentVal = Math.max(0,this.currentVal+val);
}
}
<div>
<span><small>{{percentage()+'%'}}</small></span>
<svg width="100%" height="24px" viewBox="0 0 100 24" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<path d="M0, 12L100,12 Z" fill="none" class="baseline" stroke="#ddd" stroke-width="6"></path>
<path d="M0, 12L100,12 Z" fill="none" class="mainline" [style.stroke]="computedTheme()" stroke-width="24" [style.strokeDasharray]="getDashArray()"></path>
</g>
</g>
</svg>
</div>