Simple Circular Counter Component for Your Angular

Angular Circle Counter is a simple counter component and customizable round counter/progress bar element for the 2/4/5 angular.

angular svg round progressbar, ng circle progress angular 8, circular progress bar in angular material, angular circle progress bar, ng circle progress example, circle in angular

How to make use of it:

Installation

npm install angular-circle-counter --save
or
yarn add angular-circle-counter

Usage

Import CounterModule inside app.module.ts

import {CounterModule} from 'angular-circle-counter';
then add it to imports list:
imports: [
    CounterModule
],

If you want to use counter text prefix or suffix
remember about adding CUSTOM_ELEMENTS_SCHEMA to module schemas:
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

schemas: [CUSTOM_ELEMENTS_SCHEMA],

<app-counter [from]=0 [to]=100 [of]=100></app-counter>

Options

ParameterTypeOptionsDefaultDescription

from	`number`	–	0	Starting number
to	`number`	–	0	Finish number
of	`number`	–	Same as to	E.g. 50 out of 100 – useful for displaying percentages
mode	`string`	onInit \| viewport \| manual	onInit	Decides when to start counting
animationTime	`number`	–	4000	Time at which the counter is to take place
animationType	`string`	See available names here	linear	Animation type
showCircle	`boolean`	true/false	true	Determines the display of the circle
circleColor	`string`	–	#307bbb	Determines the color of the circle
fontSize	`number`	–	150	Manipulates the size of the counter
delay	`number`	–	0	Delay with which the countdown is to start
(finished)	`event`	–	–	Event sent at end of countdown
<ng-counter-suffix></ng-counter-suffix> <ng-counter-prefix></ng-counter-prefix>	`html`	–	–	Add HTML code before or after a counter number
finishedText	`string`	–	–	Add text to display after the counting is finished