Circular progress bar in angular 2

Issue

I am trying to create a percentage loader in angular 2. The Loader should load the amount of given percentage and it should be dynamic.

HTML

<div class="col-lg-3 col-md-3 bar">
  <div class="c100 p50 small">
    <span>50%</span>
    <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
    </div>
  </div>
  <div class="textP">
    <h3>Statistic 1</h3>
  </div>
</div>

I have created one by using CSS for 50% but it’s not dynamic. When i change the percentage it loads only the previous value 50%. Do I have to use ngModel or anything.

Solution

Suppose you have a component circular-percent-loader which you include in your parent component like ,

<circular-percent-loader [percent]="percent"></circular-percent-loader>

Here percent is the input for your child component.In the child component,
you can take this and set the percentage like this.I am supposing you take the 50% from this span.

<div class="col-lg-3 col-md-3 bar">
                <div class="c100 p50 small">
                    <span>{{percent}}</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
                <div class="textP">
                    <h3>Statistic 1</h3>
                </div>
            </div>

In child component.ts

@Input() percent: number;

Answered By – RemyaJ

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.