Zugriff auf DOM-Eigenschaften in Angular 2

Question

Ich habe einen Fortschrittsbalken implementiert und den prozentualen Fortschrittsbalken im HTML-Code angezeigt, indem ich mit document.getElementsByClassName auf die Eigenschaft width des Fortschrittsbalkens zugegriffen habe. Aber was sollte ich verwenden, um dies in Angular 2 zu implementieren, die Typoskript verwendet.

Arbeits HTML und JS-Code: https://jsfiddle.net/nvarun123/2cy2kg7y/1/

Angular 2-Code (festgelegt werden sollte): https://plnkr.co/edit/nlRa0aaQv7GntxxBy8AC?p=preview

HTML-Code:

<div class="container"> 
    <div class="bar"> 
    <span class="bar-fill"></span> 
    </div> 
</div> 
<div id="progress"></div> 

JS-Code:

var 
    bar = document.getElementsByClassName("bar")[0], 
    barFill = document.getElementsByClassName("bar-fill")[0], 
    progress = document.getElementById("progress"), 
    barWidth = window.getComputedStyle(bar, null).getPropertyValue("width"), 
    barFillWidth = window.getComputedStyle(barFill, null).getPropertyValue("width"), 
    pct = 100 * (parseFloat(barFillWidth)/parseFloat(barWidth)) + "%"; 

progress.innerHTML = pct; 

Answer 1

I würde ngStyle verwenden, damit Sie den Fortschrittsbalken perc dynamisch aktualisieren können und den Benutzern angezeigt werden.

HTML-Code

<div class="container"> 
    <div class="bar"> 
    <span class="bar-fill" [ngStyle]="{'width': progressPercentage + '%'}"> 
    </span> 
    </div> 
</div> 
<div id="progress">{{progressPercentage}}%</div> 

Typoskript-Code

import {Component} from '@angular/core'; 
@Component({ 
    selector:'progressbar', 
    styleUrls: ['./progressbar.component.css'], 
    templateUrl: './progressbar.component.html' 

}) 
export class ProgressBar{ 
    progressPercentage: number; 

    constructor() { 
     this.progressPercentage = 50; 
    } 
} 

plunkr https://plnkr.co/edit/LytbNF5HdDYUAxBUYenf?p=preview