Increase progress by pressing a button

I've implemented the NgCircleProgressModule library to display a circle with a percentage value in the center.

It seems that the progress value remains static and only updates when the buttons are clicked.

Clicking on the 25% button within the circle displays the same percentage value and button.

Currently, I'm manually changing the value using [percent] = "25", but I'm unsure how to create a function to dynamically update the [percent] based on the button clicked.

Does anyone have a solution for this?

HTML

<circle-progress
  [percent]="progress"
  [radius]="100"
  [outerStrokeWidth]="10"
  [innerStrokeWidth]="10"
  [space] = "-10"
  [outerStrokeColor]="'#4882c2'"
  [innerStrokeColor]="'#e7e8ea'"
  [titleFontSize]= "24"
  [unitsFontSize]= "24"
  [showSubtitle] = "false"
  [animation]="true"
  [animationDuration]="300"
  [startFromZero]="false"
  [responsive]="true"
></circle-progress>

<button>25%</button>
angulartypescript

Answer №1

Here's a different approach using the (click) event:

<button (click)="progress = 25">25%</button>

Alternatively,

.html

<button (click)="changeProgress(25)">25%</button>

.ts

changeProgress(value) {
  this.progress = value
}

See it in action here

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

What steps can be taken to resolve the error message "How can you repair 'Cannot read properties of undefined (reading 'front_default')'?"

I'm encountering an issue while trying to display data from an API. Although I am able to access the data, a perplexing error keeps popping up that I can't seem to troubleshoot. Here's the error message: Uncaught TypeError: Cannot read pr ...

reactjstypescriptapi

Ensure that parameters are validated correctly in the Next.JS application router using the searchParams method

When building the page, I need to properly validate params in the Next.JS app router using searchParams. My goal is to show a main image (coverImage) for each photo on the /gallery page. When a photo is clicked, I want to display more photos of the same k ...

javascriptreactjstypescriptnext.jsnext.js13

The type entity i20.CdkScrollableModule cannot be resolved to symbol in the nx workspace

After extensively researching online, I still haven't found a solution to this particular issue. I've attempted various troubleshooting steps, including deleting node_modules and package-lock.json, updating dependencies, and running nx migrate. ...

angulartypescriptnpx

What is the best way to transfer data received from an observable function to use as an input for another observable function?

After carefully declaring all the variables, I am facing an issue with passing the value obtained from the first observable function (this.acNum) as a parameter to resolve the second observable function within the ngOnInit method. Despite displaying correc ...

angulartypescriptobservable

Angular progress tracker with stages

I have been exploring ways to create a progress bar with steps in Angular 12 that advances based on the percentage of progress rather than just moving directly from one step to another. This is specifically for displaying membership levels and indicating h ...

angulartypescript

modify the navigation when router events are triggered

Is there a way to modify the destination route after the router events have been triggered in an Angular app? I am trying to implement a functionality where if the user clicks the browser back button, the navigation is redirected to the home page. However, ...

javascriptangular

Improving the URL structure in Angular 8 with ngx-extended-pdf-viewer

How to prevent ngx-extended-pdf-viewer from removing # in Angular URL I have integrated "ngx-extended-pdf-viewer": "^7.3.2", and "zone.js": "~0.10.3" I need to retain the # in my URL: @NgModule({ imports: [RouterModule.forRoot(routes,{useHash: true,})] ...

angularngx-extended-pdf-viewer

Set the array as the object attribute

Transitioning my app from AngularJs to Angular 4 has been quite a challenge. I've noticed that the type of statements I frequently used in my code are now failing in Angular 4 (TypeScript): Update: The following lines were previously used in Angular ...

angulartypescript

I've tried using a ControlValueAccessor, but for some reason the value isn't getting passed to the form

Currently, I am experimenting with reactive forms in Angular, and I'm encountering difficulties with updating the form from custom components. As an example, take a look at the date-input component created using flatpickr in the linked Plunker demo. ...

angulartypescriptflatpickr

Dynamically setting properties in a Vue component using Angular

After browsing through this interesting discussion, I decided to create a web component: <my-vue-web-comp [userId]="1"></my-vue-web-comp> Initially, everything was working smoothly in Angular when I assigned a static property. Howeve ...

javascriptangulartypescriptvue.jsweb-component

What is the best way to combine index signatures with established properties?

Imagine a scenario where an interface has certain defined properties with specific types, but can also include additional properties with unknown keys and various other types. Here is an example: interface Bar { size: number; [key: string]: boolean | s ...

typescriptindex-signature

Navigating in Angular is made easy with the Angular routing feature, which allows you to redirect

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

angulartypescriptangular-routingangular-router

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

I'm currently working on uploading various files using ng2-file-upload. I've been successful in uploading different file types like png and jpg, but I'm facing an issue with the .ply file extension. Can someone guide me on how to upload a fi ...

javascriptangulartypescriptply-file-format

Typescript is issuing warnings when displaying errors for the RTK query

I am currently using React Ts and Rtk query. My goal is to display the API response error on the UI. While it's working, I am encountering a warning that prompts me to set an error type for the response errors. How can I incorporate an error type for ...

reactjstypescriptreduxrtk-query

How can I access a file uploaded using dxFileUploader?

I am facing an issue with retrieving a file from dxFileUploader (DevExpress) and not being able to read it in the code behind. The file is only appearing as an object. Here is My FileUploader : { location: "before", ...

typescriptdevexpressdevextreme

Is it necessary to include @types/ before each dependency in react native?

I am interested in converting my current react native application to use typescript. The instructions mention uninstalling existing dependencies and adding new ones, like so: yarn add --dev @types/jest @types/react @types/react-native @types/react-test- ...

javascriptnode.jstypescriptreact-native

Display a loading indicator with the shortest possible delay whenever utilizing the React Router v6 Link functionality

Integrate React and Router v6 App.tsx: const Page1 = lazy(() => pMinDelay(import('./views/Page1'), 500)) const Page2 = lazy(() => pMinDelay(import('./views/Page2'), 500)) return ( <Suspense fallback={<Loading/>}gt ...

reactjstypescriptreact-router

How to dynamically generate Angular component selectors with variables or loops?

Looking to dynamically generate the Selector Tag in my app.component.html using a variable. Let's say the variable name is: componentVar:string What I want in my app.component.html: <componentVar></componentVar> or <app-componentVar& ...

javascriptangulartypescriptfrontend

Filling a data entry with simultaneous commitments

Sample code: type Alphabet = 'a' | 'b' | 'c'; const alphabetMap: Record<Alphabet, null> = { 'a': null, 'b': null, 'c': null} // Select any asynchronous processing function you prefer funct ...

typescript

Accessing Nested FormGroup in Angular 6 by its name

Dealing with Nested Form Groups address = new FormGroup({ 'com.complex.Address':new FormGroup({ city: cityControl, streetName: streetNameControl, houseNumberAddition: houseNumberAdditionControl, ho ...

typescriptangular6form-controlformgroups