Feature Request: content inside progress arc

[bdkent]

Would it be feasible to render the sub-elements of the <progress-arc> element as content centered within the arc?

This would be very convenient for placing an icon or perhaps to display the percent complete.

For example: <progress-arc ... > {{complete}} % </progress-arc> or <progress-arc ... > <i class="fa fa-clock-o"></i> </progress-arc>

Thoughts??

[mathewbyrne]

The feature-label branch has a label attribute that accepts a text value that will be centred inside the arc. It only supports text data at the moment however, but can easily be used to have a percentage complete label.

I can see a use-case for supporting arbitrary HTML content, but that does complicate things a bit since we're using SVG to render the arc and I'm not sure if HTML inside SVG is supported.

Still it's also not hard to centre content over the top of a progress arc using an absolutely positioned CSS element. So the text might be enough without over-complicating the implementation.

What do you think?

[harshitgoel96]

I have created a fork that would display the text BELOW the arc, this removes the boundary and size limitation due to arc. https://github.com/harshitgoel96/angular-progress-arc

[darshanrampatel]

@mathewbyrne I have tested this branch and all is working good for me - I would agree that text only is probably fine for the label attribute.