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

Utilizing a tuple for indexing in Typescript

Imagine you have a tuple containing keys like ["a", "b", "c"] and a nested object with these keys as properties {a: {b: {c: number}}}. How can you recursively access the members of the tuple as indices in typescript? An example implementation without prop ...

typescriptrecursiontuplespluckindex-signature

Utilize IDE's capabilities to recommend mutations and actions during the process of committing or dispatching

In my current Vue 3 Typescript project, I am utilizing Vuex. The code snippet below showcases how I have implemented it: import { createStore, useStore as baseUseStore, Store } from 'vuex'; import { InjectionKey } from 'vue'; export i ...

typescriptvue.jsvisual-studio-codevuexintellisense

Issue with Static Injector: GameService cannot be injected with HttpClient in the AppModule

I'm encountering an issue with a library I created in Angular. The library makes API calls using HttpClient, but when I try to access a class from the library called GameService, I receive an error message: "Error Static Injector: StaticInjectorError( ...

angularangular-library

How to Create a Flexible Angular Array Input Component

I have been working on developing reusable form input components using Angular's reactive forms. However, I am currently encountering challenges with my FormArray input component. To overcome some issues, I had to resort to using double-type casting ...

angulartypescript

Struggled with setting up the WebSocket structure in typescript

Issue Running the code below results in an error: index.tsx import WebSocket from 'ws'; export default function Home() { const socket = new WebSocket('ws://localhost:1919/ws'); return ( <div>Home</div> ); } ...

typescriptnext.jswebsocket

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

angulartypescript

Is it possible for the NativeScript CLI to generate spec files automatically?

As I delved into NativeScript today, I couldn't help but notice that the tabbed template app it generated didn't come with spec files like those generated by Angular CLI. Is there a way to incorporate Karma and Jasmine into the app creation proce ...

angularkarma-jasminenativescripttns

ERROR : The value was modified after it had already been checked for changes

Encountering an issue with [height] on the main component and seeking a solution Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '753'. Current value: '731'. I have th ...

htmlcssangular

Navigate back to the main page using a tab

Is there a way to navigate back to the rootPage that is defined in the appComponent when using tabs? I have found that the setRoot method does not function as I anticipated. When used on a Tab page, the navigation stack is not cleared. Instead of the navig ...

angulartypescriptionic-frameworkionic2ionic3

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Just diving into Typescript and encountered an issue with a Material UI Slider. I'm trying to update my age state variable, but running into a Typescript error due to the typing of age being number and onChange value being number | number[]. How can I ...

reactjstypescript

Cannot display value in NumericFormat when using MUI TextField due to prefix restrictions

When using MUI TextField with the NumericFormat and prefix prop, there seems to be an issue. If I start typing a number quickly, only one digit gets registered. On the other hand, if I type slowly all my numbers show up but the prefix disappears. All inp ...

node.jsreactjstypescriptmaterial-uireact-number-format

Supplier for a module relying on data received from the server

My current component relies on "MAT_DATE_FORMATS", but I am encountering an issue where the "useValue" needs to be retrieved from the server. Is there a way to make the provider asynchronous in this case? export const MY_FORMATS = { parse: { d ...

javascriptangulartypescript

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

Troubleshooting problem with Angular Click Outside Directive and unexpected extra click event issue

The challenge I'm facing involves implementing a custom Click Outside Directive for closing modal dialogs, notifications, popovers, and other 'popups' triggered by various actions. One specific issue is that when using the directive with pop ...

javascriptangulartypescript

Participating in consolidated data

I need to merge data from my trainings-table with my users-table. The structure of the data is as follows: - users - key1 - name - trainingIds - t_key1 - t_key3 - trainings - t_key1 - name - description - t_k ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire2

Having trouble retrieving the URL from the router in Angular 2?

Whenever I try to access the URL using console.log(_router.url), all it returns is a / (forward slash). Here is the code snippet in question: constructor( private el: ElementRef, private _auth:AuthenticationService, @Inject(AppStore) private ...

angularangular2-routing

What causes typescript to trigger compilation errors in react-scripts when using certain keywords?

Struggling with a bizarre issue involving TypeScript and React Scripts Line 5:16: Parsing error: Unexpected token 3 | class AutoUpdateBase<TBinding> implements IAutoUpdate<TBinding>{ 4 | > 5 | protected binding?: (arg: TBinding) ...

reactjstypescriptcompiler-errorskeywordreact-scripts

Angular allows for a maximum time span of 60 days between two date inputs

I am looking to implement a validation in JavaScript or TypeScript for Angular where the start date cannot be more than 60 days after the end date is entered. The requirement is to enforce a "maximum range of 60 days" between the two input dates (dateFro ...

javascriptangulartypescript

Updating the filter predicate of the MatTableDataSource should allow for refreshing the table content without needing to modify the filter

Currently, I am working on dynamically altering the filterPredicate within MatTableDataSource to enhance basic filtering functionalities. I want to include a fixed condition for text filtering (based on user input in a search field) for two string columns ...

javascriptangularmat-table

Using Angular 2 to execute an interface while making an HTTP GET request

I've managed to successfully retrieve and display data from a JSON object using *ngFor in Angular. However, I am struggling with applying an interface to the retrieved data. This is the content of my interface file: import {Offer} from './offer ...

javascriptangular