Use this tag for questions about Angular Material Stepper, the implementation of stepped workflow with Material Design styling.
Questions tagged [angular-material-stepper]
123 questions
0
votes
1 answer
How does the Angular Material Stepper invalidates the FormGroup
The angular material Stepper component can be connected with a form Group like this
Jeanluca Scaljeri
- 26,343
- 56
- 205
- 333
0
votes
1 answer
Angular Material Stepper reusable form with separate steps as components
I'm using Angular Material stepper and it works fine as a whole code in 1 component. But stepper will be used in ~10 different components. There are 7 different types of form like input, select, name, table, etc. So I figured out that I will divide…
Michał Sawicki
- 49
- 1
- 10
0
votes
1 answer
How to hide one of the mat-step of Material stepper without removing it from the DOM?
How to hide one of the "mat-step" from the mat-horizontal-stepper?
I have set this css property:
display:none
but it is not working on "mat-step".
I do not want to remove that element from the DOM, so *ngIf is useless here.
I saw somewhere they use…
Rakeys
- 55
- 1
- 5
0
votes
2 answers
Angular Reactive Forms Validation Messages Not Showing
I'm using Angular 8 and I used Reactive form for my sign up page. And also used Angular Material Stepper Ui for designing the form.
This is the signup.component.ts file.
import { Component, OnInit, ViewChild } from '@angular/core';
import {…
Pramod Dhananjaya
- 43
- 3
- 10
0
votes
1 answer
How to set selectedIndex of AngularMaterial.Stepper based on @Input() array length
I have a material stepper representing an array of objects. I'm trying to set the current step of the angular material v9 stepper to the last element of the array of objects. The problem is that the array of objects is a component input and I think…
gh0st
- 1,653
- 3
- 27
- 59
0
votes
1 answer
Angular material stepper header horizontal line and bottom border css
I want to implement angular material stepper as per attached screenshot where the horizontal line has some different css on edit state and when its completed then its different.
and on edit state, there is bottom line which I need to show.
Rakesh Singh
- 211
- 1
- 5
- 15
0
votes
1 answer
display inline blocks do not remain aligned in matterial stepper header
I have issues keeping an image and a div containing text to stay aligned correctly.
If the screen is big, all elements are correctly aligned yet if the screen is too small ( cellphone sized screens for instance ) the image gets pushed upwards such…
Matthieu Raynaud de Fitte
- 2,001
- 3
- 25
- 49
0
votes
1 answer
angular material stepper generation
How can I generate a Materiel Stepper ?
I receive a JSON file and from it, I need to generate the stepper. I cannot get anything to display at all when using [innerHTML]
Here is an example of what I am trying to achieve :
Matthieu Raynaud de Fitte
- 2,001
- 3
- 25
- 49
0
votes
1 answer
Change background color stepper angular material with condition
I would change dynamically color of the stepper in an Angular Material project. I could have more than one state for each step. For example:
state: OK (should be green)
state: REFUSED (should be red)
So, that's what I have done so…
Atlas91
- 5,754
- 17
- 69
- 141
0
votes
1 answer
Does Angular allow nested steppers?
I'm trying to nest Angular Material steppers, to better model business logic (forms and other step contents elided for brevity):
…
Scott Deerwester
- 3,503
- 4
- 33
- 56
0
votes
1 answer
Passing Checkbox state in a stepper component
I'm learning React and I deep dived into hooks as they are elegant, minimize the use of classes, and (at first) looked easy to understand. Using Material-ui's stepper and checkboxes component. I'm trying to export the values of what was selected and…
Liverpool
- 265
- 7
- 21
0
votes
1 answer
SelectedIndex is not assigned in angular material stepper
I use angular material stepper. I take data from backend and according to this data I should set specific step. I use [selectedIndex] directive, but selectedIndex is not applied to value, that I pass to that. setTimeout I tried, it does not work for…
prolina
- 185
- 4
- 14
0
votes
1 answer
Angular delete object at index in stepperArray
Before I make this API call I need to remove the product that contains a selectedPlan value of null. I am unsure as to why the below is not working. Do I need reassignment of stepper array before passing as parameter in…
ianhalfpenny
- 147
- 4
- 15
0
votes
1 answer
Angular Material Stepper, Dynamic color change
I am trying to use the angular material stepper to use as a progress tracker ( I know it's not meant for it... but that is the only one fitting my requirement). I have 5 steps in my stepper.
I want to turn the color on when the product or item has…
abhigyan nayak
- 1,394
- 6
- 25
- 35
0
votes
1 answer
Have body of all mat-horizontal-stepper steps outside of the mat-horizontal-stepper tag
I want to use this : https://material.angular.io/components/stepper/overview
but for the purposes of layout (which can be dynamic) where I may or may not have elements come in between the clickable title of a step and it's content, I want to have…
tatsu
- 2,316
- 7
- 43
- 87