The flexibility of adjusting the percentage in the ng-circle-progress feature

Currently, I am utilizing ng-cycle-progress in my Angular progress. Here is the HTML code:

<circle-progress
  [percent]="score"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

In my .ts file, I am setting the score dynamically. However, I encountered an error while trying to render the progress bar. Any assistance would be greatly appreciated. Thanks in advance.

Edit: The specific error message I am encountering is as follows:

Error: "Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[CircleProgressComponent -> CircleProgressOptions]: 
  StaticInjectorError(Platform: core)[CircleProgressComponent -> CircleProgressOptions]: 
    NullInjectorError: No provider for CircleProgressOptions!
   ... (error continues)
angulartypescript

Answer №1

You forgot to include the default settings for CircleProgressOptions. Make sure to add them in the module.

Check out this Stackblitz Demo for reference.

NgCircleProgressModule.forRoot({
      // Don't forget to set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#78C000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
      ...
})

Answer №2

Update your app.module.ts :

import { NgCircleProgressModule } from 'ng-circle-progress';

==>

import { NgCircleProgressModule } from './ng-circle-progress.module';

then proceed to import it

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,




  // Include ng-circle-progress as an import
    NgCircleProgressModule.forRoot({
      // set default configurations here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#700000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
      ...
    })

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modify your app.component.ts :

import { CircleProgressComponent, CircleProgressOptions } from 'ng-circle-progress';

https://github.com/bootsoon/ng-circle-progress/issues/42

https://www.npmjs.com/package/ng-circle-progress

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sass fails to import the theme for the angular material checkbox

I'm facing an issue where, despite specifying imports in my SCSS file and setting up a custom theme, the checkbox styles are not visible except for those related to typography. This is what my SCSS file looks like: @import "~bootstrap/scss/bootstrap ...

cssangularsassangular-material

Arrangement of items in Angular 2 array

Received a JSON response structured like this JSON response "Terms": [ { "Help": "Terms", "EventType": "Success", "Srno": 1, "Heading": "Discount Condition", "T ...

angulartypescriptngfor

Troubleshooting ngModel Binding Issue with Sub-Children in CKEditor 5 and Angular 7

Firstly, I am sharing my code below: ListPagesComponent: export class ListPagesComponent { public model = { id: -1, actif: 0, link: '', htmlContent: { fr: '', ...

angularckeditorangular7angular8ckeditor5

I am having trouble with Angular not redirecting to the correct page and I'm not sure how to troubleshoot this issue

After creating a component named detail that is supposed to be associated with a button, I encountered an issue where it doesn't route me to the desired location. Strangely, no error messages are displayed, leaving me puzzled about how to solve this p ...

angularrouteshyperlink

Changing the name of an Angular2 import module

Deciding to improve readability, I opted to rename the @angular module to angular2 and gain a better understanding of how imports function. Prior to making this change, the systemjs.config.js appeared like so: (function(global) { var map = { ...

typescriptangularsystemjs

Exploring observables for querying the OMDB API and obtaining information on movies

Hey everyone, I'm currently working on implementing a live search feature using Observables in Angular2 to fetch Movie data from the OMDB API. While I can see that it is functioning correctly in the Chrome Network tab, the results aren't showing ...

angulartypescriptangular2-observables

Whenever I try to load the page and access the p-tableHeaderCheckbox in Angular (primeng), the checkbox appears to be disabled and I am unable to

I attempted to use the disabled attribute on p-tableheadercheckbox in order to activate the checkbox. <p-tableHeaderCheckbox [disabled]="false"></p-tableHeaderCheckbox> <ng-template pTemplate="header"> <tr> ...

angulartypescriptprimeng

Unable to remove loading.tsx file

Currently tackling a project using Next.js, I decided to include loading.tsx within the app directory. However, upon attempting to delete it, an error crops up: Caused by: The system cannot find the file specified. (os error 2) The import trace for the r ...

reactjstypescriptnext.jsfrontendnext.js13

A step-by-step guide to resolving the TS2345 compilation error during your TypeScript upgrade from version 4.7 to 4.8

We encountered a compiling error after upgrading from TypeScript 4.7.4 to a newer version (specifically, 4.8.4). This error was not present in our codebase when using 4.7.4. To pinpoint the issue, I have extracted the error into a small code snippet. When ...

typescripttypescript-generics

Securely connecting Angular front end with NodeJS backend server using HTTPS encryption

I am currently using a frontend built with Angular 7 and ngx-admin, along with a backend developed in nodeJS and Express. The issue: The Angular frontend uses HTTPS to communicate with the backend via HTTP. This has caused the following problem: Mixed Co ...

node.jsangularhttpexpresshttps

Angular encountered an error when trying to access the property "fruits" of an undefined object

When working with Angular, I encountered an issue where I received the error message "cannot read property 'fruits' of undefined." Within my class definition, I have included the following: export class MyClass implements OnInit { fruits: any[] ...

arraysangulartypescriptangular7

What is the best way to invoke a method within the onSubmit function in Vuejs?

I am facing an issue with a button used to log in the user via onSubmit function when a form is filled out. I also need to call another method that will retrieve additional data about the user, such as privileges. However, I have been unsuccessful in makin ...

typescriptformsvue.jsstoreonsubmit

Having trouble navigating typescript's "import" syntax in conjunction with compiler options like module and choosing between esnext and commonjs?

I am facing an issue with my typescript project that includes mocha tests. Here is a snippet of how the tests start: import { assert } from "chai"; import "@material/mwc-ripple"; //I need to test a script that uses this describe("simple test", () => { ...

node.jstypescriptmaterial-uimocha.jsweb-component-tester

Attempting to incorporate alert feedback into an Angular application

I am having trouble referencing the value entered in a popup input field for quantity. I have searched through the documentation but haven't found a solution yet. Below is the code snippet from my .ts file: async presentAlert() { const alert = awa ...

angulartypescriptionic-framework

Guide on transforming a tuple of random types into a nested type structure with the help of recursive conditional types

When I responded to the query on whether Typescript Interfaces can express co-occurrence constraints for properties, I shared the following code snippet: type None<T> = {[K in keyof T]?: never} type EitherOrBoth<T1, T2> = T1 & None<T2&g ...

typescript

Is the graphql codegen accurately generating the types?

I'm in the process of developing a basic Next.js application with TypeScript by integrating Strapi as a headless CMS. The main goal is to use Strapi and GraphQL, along with TypeScript, to display content on the Next.js app. Within Strapi, there is a ...

typescriptnext.jsgraphqlstrapi

Karma's connection was lost due to a lack of communication within 10000 milliseconds

The Karma test suite is encountering issues with the following message: Disconnected, because no message in 10000 ms. The tests are not running properly. "@angular/core": "7.1.3", "jasmine-core": "3.3.0", "karma-jasmine": "1.1.2", The failure seems t ...

angulartypescriptjasminekarma-runnertypescript-namespace

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

Encountering an error while trying to start the webpack dev server with the command provided below. Despite suggestions that it could be due to outdated webpack versions, I am confident that all components are up to date: [email protected] [email ...

javascriptreactjstypescriptwebpackwebpack-dev-server

Downloading fonts from Google Fonts is always a struggle when using Next.js

After initializing a fresh Next.js project using create-next-app, I managed to successfully launch it with npm run dev. However, an issue arises every time Next.js boots up, displaying the following error: FetchError: request to https://fonts.gstatic.com/ ...

javascripttypescriptnext.jsgoogle-fonts

Leveraging @ContentChildren in Angular 2 to sort through a component's contents

I am currently working on implementing a search component that can trigger a search(term: string) function on specific child components. If the search on the child fails, the function will return null; otherwise, it will return a reference to the child. M ...

angular