src/app/app.component.ts
| selector | app-root |
| styleUrls | app.component.css |
| templateUrl | ./app.component.html |
Properties |
Methods |
constructor(dataService: DataService)
|
||||||
|
Defined in src/app/app.component.ts:28
|
||||||
|
Parameters :
|
| changeProgresValue | ||||||
changeProgresValue(v: number)
|
||||||
|
Defined in src/app/app.component.ts:35
|
||||||
|
Parameters :
Returns :
void
|
| loadBarData |
loadBarData()
|
|
Defined in src/app/app.component.ts:42
|
|
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/app.component.ts:32
|
|
Returns :
void
|
| resetState |
resetState()
|
|
Defined in src/app/app.component.ts:39
|
|
Returns :
void
|
| barData |
barData:
|
Type : IBarData
|
|
Defined in src/app/app.component.ts:13
|
| bars |
bars:
|
Type : QueryList<ProgressComponent>
|
Decorators : ViewChildren
|
|
Defined in src/app/app.component.ts:14
|
| isLoading |
isLoading:
|
Type : boolean
|
Default value : false
|
|
Defined in src/app/app.component.ts:15
|
| selectedProgressBar |
selectedProgressBar:
|
Type : any
|
|
Defined in src/app/app.component.ts:16
|
| selectedTheme |
selectedTheme:
|
Type : Theme
|
Default value : Theme.Blue
|
|
Defined in src/app/app.component.ts:17
|
| themeOpt |
themeOpt:
|
Type : []
|
Default value : [
{name:'Blue', value:Theme.Blue},
{name:'Cyan', value:Theme.Cyan},
{name:'Green', value:Theme.Green},
{name:'Indigo', value:Theme.Indigo},
{name:'Orange', value:Theme.Orange},
{name:'Pink', value:Theme.Pink},
{name:'Purple', value:Theme.Purple},
{name:'Teal', value:Theme.Teal},
{name:'Yellow', value:Theme.Yellow}
]
|
|
Defined in src/app/app.component.ts:18
|
import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { IBarData } from './interfaces/progress.bar';
import { Theme } from './components/progress/theme.enum';
import { DataService } from './services/data.service';
import { ProgressComponent } from './components/progress/progress.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
barData:IBarData;
@ViewChildren(ProgressComponent) bars:QueryList<ProgressComponent>;
isLoading:boolean = false;
selectedProgressBar:any;
selectedTheme:Theme = Theme.Blue;
themeOpt = [
{name:'Blue', value:Theme.Blue},
{name:'Cyan', value:Theme.Cyan},
{name:'Green', value:Theme.Green},
{name:'Indigo', value:Theme.Indigo},
{name:'Orange', value:Theme.Orange},
{name:'Pink', value:Theme.Pink},
{name:'Purple', value:Theme.Purple},
{name:'Teal', value:Theme.Teal},
{name:'Yellow', value:Theme.Yellow}
]
constructor(private dataService:DataService){
}
ngOnInit(){
this.loadBarData();
}
changeProgresValue(v:number){
let progressBar = this.bars.toArray()[this.selectedProgressBar];
progressBar.progress(v);
}
resetState(){
this.selectedProgressBar = 0;
}
loadBarData(){
this.isLoading = true;
return this.dataService.loadData().subscribe((barData:IBarData)=>{
this.resetState();
this.barData = barData;
this.isLoading = false;
},(err)=>{
this.isLoading = false;
console.log(err);
})
}
}
<nav class="navbar navbar-dark navbar-expand-lg" [style.backgroundColor]="selectedTheme">
<a class="navbar-brand" href="#">
<img height="40" src="assets/img/angular.svg" width="37">
<img height="40" src="assets/img/bootstrap.png" width="48">
</a>
<div class="navbar-text">Progress Bar - Angular6, Bootstarap4</div>
</nav>
<div class="container">
<app-loader [loading]="isLoading"></app-loader>
<div class="row mt-5">
<div class="col-12">
<label class="float-left">Theme:</label>
<div class="d-inline float-left mx-2">
<select class="form-control" (change)="selectedTheme=$event.target.value;">
<option
[value]="t.value"
*ngFor="let t of themeOpt">{{t.name}}</option>
</select>
</div>
<button
(click)="loadBarData()"
type="button"
class="btn float-right" [style.backgroundColor]="selectedTheme" [style.color]="'#fff'">Load Remote Data</button>
</div>
<div class="col-12" *ngIf="barData">
<div class="row py-5">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3" *ngFor="let bar of barData.bars">
<div class="p-2">
<app-progress [maxVal]="barData.limit" [currentVal]="bar" [theme]="selectedTheme"></app-progress>
</div>
</div>
</div>
</div>
<div class="col-12" *ngIf="barData">
<div class="d-inline float-left mr-2">
<select class="form-control" (change)="selectedProgressBar=$event.target.selectedIndex;">
<option
[value]="i"
*ngFor="let bar of barData.bars;index as i;">{{'Progress Bar '+(i+1)}}</option>
</select>
</div>
<div class="d-inline float-right">
<button
*ngFor="let b of barData.buttons"
(click)="changeProgresValue(b)"
type="button"
class="btn ml-2" [style.color]="'#fff'" [style.backgroundColor]="selectedTheme">{{b}}</button>
</div>
</div>
</div>
</div>