In Angular Mat Stepper, only allow navigation to active and completed steps

For a project, I created a sample using React.js and Material UI. Here is the link to the project: https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

Now, I am attempting to recreate the same sample using Angular and Material, but unfortunately, I have not been able to achieve the same functionality as in the React version. Can anyone provide assistance with this?

Link to my Angular work:- https://stackblitz.com/edit/stepper-dynamic-gpwp1x?file=src%2Fapp%2Fapp.component.html

Here are the goals I want to accomplish in this sample:

  • Implement Stepper headers: In the React sample, only the current header is enabled, and upon selection, the 'add item' button is activated.
  • Remove icons: I have been struggling to get rid of the edit icons.

Thank you in advance for any help provided.

angularreactjsangular-materialmaterial-ui

Answer №1

To achieve this goal, you can follow the steps outlined below.

Disabling the add button:

Firstly, add a template reference #verticalStepper to your stepper component.

<mat-vertical-stepper #verticalStepper

Next, add a template reference #addButton to your button step.

<mat-step #addButton>

Then, compare the selected stepper with the button step and disable the button if they do not match.

<button mat-flat-button [disabled]="verticalStepper.selected != addButton" (click)="addItem()">

Using [completed] attribute to control step completion:

Add a template reference #step to your step in the *ngFor loop. Set [completed] input to true based on step.completed.

<mat-step #step *ngFor="let step of newSteps; let i = index" [completed]="step.completed">

Trigger the (change) event to set step.completed = true.

(change)="changeStep($event, i); step.completed = true">

Replacing the edit icon:

You can replace the default edit icon with the step index by adding the following code snippet.

<ng-template matStepperIcon="edit" let-index="index">
   {{index + 1}}
 </ng-template>

Access the Stackblitz demo for reference:

Stackblitz Demo Link

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 is the best way to invoke a function only once in typescript?

Struggling to implement TypeScript in React Native for fetching an API on screen load? I've been facing a tough time with it, especially when trying to call the function only once without using timeouts. Here's my current approach, but it's ...

javascriptreactjstypescriptreact-nativeexpo

There appears to be an issue with the error handling function within React

I am facing an issue with my error function while checking the browser error, and I am unsure why adding a console.log with the error is causing trouble. I need some assistance in troubleshooting this problem which seems to be occurring at line 29 of my im ...

javascriptnode.jsreactjsfirebasefirebase-storage

Error in Angular 2: Component unable to locate imported module

I'm facing an issue where a module I want to use in my application cannot be found. The error message I receive is: GET http://product-admin.dev/node_modules/angular2-toaster/ 404 (Not Found) The module was installed via NPM and its Github reposito ...

angulartypescriptnpmsystemjsangular2-toaster

Utilizing data from the home component in another component: A guide

Here is the code I am working with, showcasing how to utilize (this.categoryType) in another component: getCategoryDetails(){ return this.http.get('ip/ramu/api/api/…') .map((res:Response) => res.json()); } The above code snippet is utilize ...

angulartypescriptionic-framework

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

limitExceed(params: any) { params.forEach((data: any) => { if (data.humidity === 100) { this.createNotification('warning', data.sensor, false); } else if (data.humidity >= 67 && data.humidity <= 99.99) { ...

javascriptangulartypescript

What is the proper way to utilize props.theme.breakpoints in conjunction with the makeStyles hooks?

Can anyone help me understand how to incorporate the Material breakpoints provided at https://material-ui.com/customization/breakpoints/ into the makeStyles hook for responsive styling? I am having trouble using props.breakpoints.down('600') with ...

javascriptreactjsmaterial-uireact-hooks

What is the reason behind being able to assign unidentified properties to a literal object in TypeScript?

type ExpectedType = Array<{ name: number, gender?: string }> function go1(p: ExpectedType) { } function f() { const a = [{name: 1, age: 2}] go1(a) // no error shown go1([{name: 1, age: 2}]) // error displayed ...

javascriptreactjsangulartypescript

A guide to merging two JSON objects into a single array

Contains two different JSON files - one regarding the English Premier League stats for 2015-16 season and the other for 2016-17. Here is a snippet of the data from each file: { "name": "English Premier League 2015/16", "rounds": [ { "name": ...

javascriptangulartypescript

Contrasting the identical tag version of material-ui on GitHub versus the NPM repository

As I was examining the tarball for Material UI version 1.5.1, I noticed that there are actually two different tarballs available for this particular version. Upon comparing the same file from both tarballs, I discovered some discrepancies. One of the tarb ...

reactjsmaterial-ui

Unable to install react-dom/test-utils using npm

I recently included two libraries in my package.json "devDependencies": { ... "react-dom/test-utils": "*", "react-test-renderer/shallow": "*" }, These were recommended by the React documentation to align with version 16 of the React ecosy ...

javascriptreactjsnpmnpm-installjestjs

"Challenges encountered when using map function to dynamically fill select dropdowns in React with Material UI

I am currently working on populating Material's UI with a list of countries using the following code: import React from "react"; import FormControl from "@material-ui/core/FormControl"; import InputLabel from "@material-ui/core/InputLabel"; import Se ...

javascriptreactjsmaterial-ui

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

I'm currently enrolled in a Typescript/Angular course where I am learning about the implementation of "*ngIf". During one of the lessons, the instructor provided an example using an empty array to demonstrate how it fails the condition and results in ...

htmlangularangularjstypescript

The chosen sidebar item fails to show the respective component

Is there a way to show a component when the user clicks on the sideNav? Currently, I have managed to display the SideBarNavigation using ng-simple-sidebar. However, when I click on a sidebar item, the component opens as a new page instead of being display ...

angular

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

javascriptreactjstypescriptnext.js

Attempting to transfer a username String from the client to the server using React and Typescript

I am working on a project where I need to send the username of a logged-in user from the Client to the Server as a string. Currently, I am able to successfully send an image file, but now I also need to send a string along with it. What I aim to do is repl ...

javascriptreactjstypescript

Issue: Encounter StaticInjectorError while working with deployed Angular CLI project

We encountered an issue while attempting to deploy our Angular CLI (v.1.7.1) project on GitHub Pages and Firebase, resulting in the same outcome for both platforms. The ng serve command functions flawlessly on localhost:4200, and everything goes smoothly ...

angularfirebasenpmgithub-pages

Clicking on the sub kendo panelbar item activates the parent kendo panelbar item

Utilizing a Kendo Angular UI panelbar within the sidepanel as a treemenu with submenu's, each item is linked to the Angular router routes array via routerLink. An issue arises when opening the submenu, where the parent menuitem's path is followe ...

angularkendo-ui-angular2

Issue with locating module 'swiper_angular' during Jest unit testing following upgrade from Swiper 6 to 7

Encountering an issue with my unit tests post upgrading from Swiper 6 to 7. My setup includes Angular 12 and Swiper 7.3.1. The unit tests were functioning properly before the upgrade (Swiper version 6.5.9). Incorporating the SwiperModule in my tests like ...

angularjestjsswiper.js

Utilize the get method to showcase data in a material UI table for a React application

Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...

htmlreactjsreduxaxiosmaterial-ui

Tips on personalizing MUI X Data Grid Toolbar to exclusively display icons

`function EnhancedToolbar() { return ( <GridToolbarContainer> <GridToolbarIcon icon={<FilterListIcon />} /> <GridToolbarIcon icon={<ViewColumnIcon />} /> <GridToolbarIcon icon={<SettingsEthernetIc ...

reactjsmaterial-uimui-x-data-gridmui-x