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 how much progress is needed to reach the next level. I came across an example in React called CustomStepper, which can be found here. Does anyone know of a similar example or solution for Angular 12? Any help would be greatly appreciated!
Have you considered utilizing the Angular Stepper for your project requirements? With a bit of tweaking, it could be the perfect solution for what you need.
Take a look at this interactive demo that demonstrates how to progress through a stepper based on a percentage without automatically moving to the next step. You can also see how to advance to the next level with a simple button click. Feel free to adjust and customize it to fit your specific needs!
I trust this information will prove useful to you in achieving your desired outcome.
A progress bar utilizes a basic percentage value ranging from 0 to 100 to determine the fill level of the bar. You can find more information about progress bars at this link.
To calculate and pass this percentage to <mat-progress-bar>, create a method as shown below:
<mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar>
<br />
<br />
<button (click)="onStep(1)">next step</button>
<button (click)="onStep(-1)">previous step</button>
/**
* @title Determinate progress-bar
*/
@Component({
selector: 'progress-bar-determinate-example',
templateUrl: 'progress-bar-determinate-example.html',
})
export class ProgressBarDeterminateExample {
percent: number = 50;
maxSteps: number = 20;
currentStep: number = 10;
onStep(step: number) {
this.currentStep += step;
if (this.currentStep > this.maxSteps) {
this.currentStep = this.maxSteps;
} else if (this.currentStep < 0) {
this.currentStep = 0;
}
this.percent = (this.currentStep * 100) / this.maxSteps;
console.log(step);
console.log(this.percent);
}
}
For a live demonstration, refer to this working example: Link to StackBlitz
My preferred choice is the one offered by Angular Material. For more information, you can visit this link.
When working with Angular and needing to make dynamic changes to HTML, utilizing property binding is recommended. By binding the value property, TypeScript can provide updates as needed.
I am experiencing an input delay problem when trying to update the state of a zustand variable in the onChange event. const BuildOrder = (props: { setOpen: Function }) => { const { almacenes, isLoadingAlmacenes } = useGetAlmacenes(); const { article ...
I've hit a wall after trying numerous solutions. Here is the code I'm working with: HTML: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styl ...
In an effort to streamline our development process and avoid having to build the Angular-App multiple times for different environments, we decided to skip injecting environment-specific variables (such as service endpoints) into our app using regular file ...
I have successfully set up a Next.js application with Clerk.dev for authentication and Supabase for data storage. I'm also leveraging Zustand for state management. However, an error is plaguing me, stating that there's "No storage option exists t ...
As someone new to ReactJs, I'm curious about the various methods we can use to include Headers in our service Url before making a call. While I'm familiar with how GET/POST Calls are made in angular Js after including headers, I'd like to l ...
Despite my efforts to search for a solution, I have not found anyone facing the same issue as me. When I execute next build, an error occurs stating that I cannot use getInitalProps/getServerSideProps, even though these methods are not used in my 404.tsx f ...
const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...
I am looking for a way to define an interface in a child class that can be accessed by a method in the parent abstract class. For instance, consider the following code snippet: export default abstract class MyClass { protected foo(arg: this.myInterfac ...
I found myself feeling disoriented while reading the documentation. ng generate interface <name> <type> There was ambiguity on what to input for the type field. Is it supposed to be a string, object, array, or can I define properties like ema ...
Hey there! I'm a trainee just entering the world of frontend development, so apologies in advance if my question seems silly or if my code looks messy (any corrections are greatly appreciated). In my project, I have a Dropdown element inside a Datata ...
Seeking a resolution to prevent the recurring mistake I often make, as shown below: export function scratch_1 (props: scratch_1Props): ReactElement | null { function renderA (): string { return "A"; } function renderB (): string { ...
Here is my test function: const customTestLibrary = require("./test"); describe("Initial Test", function() { it("should run the test function successfully", function(done) { customTestLibrary.execute(); done(); }); }); The te ...
My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents. When I attempt to make the header clickable to ...
In my view, I am utilizing a file upload component multiple times. Each uploading file is managed by a service that handles its metadata. However, when I add files to one component, all the components begin updating instead of just the intended one. Is it ...
My redux state is rooted and defined as: interface RootState { users: User[] } When working with components, I want to utilize ConnectedProps to generate the props type automatically from my state mapping and dispatch mapping: const mapState = (state: ...
Can someone help me with filtering certain attributes using another array? If a condition is met, I would like to return other attributes. Here's an example: Array1 = [{offenceCode: 'JLN14', offenceDesc:'Speeding'}] Array2 = [{id ...
While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...
One of my challenges involves an enum containing various API messages that I have already translated for display in the front-end: export enum API_MESSAGES { FAILED_TO_LOAD = 'Failed to load data', TOKEN_INVALID = 'Token seems to be inva ...
Upon running my test, I encountered the following error message: Error: Unhandled Promise rejection: <toHaveBeenCalledWith> : Expected a spy, but received Function. it('should change the value of myComponent', () => { spyOn(component ...
Recently, I decided to upgrade a project that had been untouched for over a year. Originally built on Angular 10, I made the jump to Angular 12. However, the next step was upgrading AngularFire from v6 to v7, and it appears there is an issue with typings. ...