The mat stepper must remain visible for all states, even when inactive

I am currently utilizing mat stepper and it automatically collapses all inactive states. However, I do not want this behavior. Instead, I would like to display the inactive states in expanded mode as well.

<mat-vertical-stepper #stepper [linear]="isLinear">
 <mat-step *ngFor="let currentUserInteraction of 
currentUserInteractions" [stepControl]="currentUserInteraction.key">
 <ng-template matStepLabel>
     {{currentUserInteraction.name}}
 </ng-template>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  </mat-step>
</mat-vertical-stepper>

currentUserInteractions = [
{name: 'first', key: 'firstStep'},
{name: 'second', key: 'secondStep'},
{name: 'third', key: 'thirdStep'},
{name: 'fourth', key: 'fourthStep'},
];

Answer №1

In my opinion, the default behavior of collapsing completed/inactive steps should remain unchanged.

If you insist on modifying this, one approach is to override the default Angular Material CSS using the following code snippet in your styles.css:

.mat-vertical-stepper-content {
  visibility: visible !important;
  height: 100% !important;
}

The reason completed/inactive steps have their height set to 0px and visibility set to hidden is because it's a part of the design. The provided CSS above aims to revert this for all mat-step. However, please note that making this change may cause the Angular Material animation of the mat-step to be slightly disrupted and appear jittery when clicked. You can observe this behavior in the provided stackblitz example 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

Tips on integrating TypeScript into JavaScript

Currently, I am working with a node.js server.js file. var http = require('http'); var port = process.env.port || 1337; http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res ...

Avoiding duplicate subscriptions in Angular 4/5: a guide to streamlining

I'm looking for a streamlined way to capture a query parameter and subscribe to an API in order to retrieve results. Currently, I am using combineLatest but it seems a bit excessive. Is there a more efficient approach that focuses solely on the queryP ...

Update the icon in real-time based on the text with Angular 8 and Font Awesome, achieving dynamic changes effortlessly

I need to dynamically change the icon based on the value within a span element. Here is the HTML structure: The version text will only have two possible values: If the value is "Active", then a success icon should be displayed. If the value is "Inactive ...

Angular is detecting an incorrect value in the mask

Recently, I came across the library found at and decided to create a directive utilizing it. My TypeScript code snippet: initForm() { this.form = this.fb.group({ item_number: [this.service.lpu.item_number, Validators.required], ...

The dynamic trio: RxJS interval, AJAX call, and reduce function

I am currently exploring a method to send AJAX requests every five seconds while utilizing RxJS operators for data mapping and reduction. To begin, there's a basic Angular service that accesses an external API containing information about astronauts ...

How can I incorporate static content files bundled with my JSON object into the API response in Nest.js?

Within my Nest.js API, there is a GET endpoint that needs to retrieve a database row along with up to 6 image files (base64 encoded) in the response. Currently, I am achieving this by extracting unique file names stored in 6 columns of the database and th ...

Challenges with Css Specificity

I'm having trouble adding a specific class to certain div elements. Here is the div in question: <div class="form-control drop-down-select"> </div> This is the CSS I have applied: .form-control.drop-down-select{ max-width: ...

Stop focusing on mat-select after a selection is made

I am encountering an issue with the following code in my .html file: <mat-form-field> <mat-select #selector(selectionChange)="onSelectionChange($event.value)"> <mat-option *ngFor="let test of tests" [value]="test"> </ma ...

Angular: Issue with FormArrays not iterating properly

Apologies for the lengthy post, but I needed to provide a detailed explanation of the issue I am facing. In my form, there is a control that contains an array of JSON data. I have created a reactive form based on this structure. Below are the JSON data an ...

Changing the output of a service by using spyOn: A step-by-step guide

There is a specific service available: export class CounterService { random: any = { value: 123, date: 456, }; getRandom() { return this.random; } } A certain component utilizes this service. Within this component, the variable &apos ...

The subscription property is undefined in AngularJs and cannot be read

I'm having trouble accessing my logged-in user data in my app and encountering this error message: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined Check out the code snippet below for referenc ...

Pattern matching for validating multiple email addresses

I need assistance with validating multiple email inputs using regex in Angular. I am looking to enforce a specific format for the emails, such as: Examples: *****@zigurat.com *****@test.com *****@partlastic.com The ***** can be any characters, but the ...

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

DevExtreme's dx-select-box fails to load when faced with an extensive amount of data

I need to display a large amount of data in a select box, potentially up to 8000 records. When attempting to bind this data to a dx-select-box using an array source, the control crashes and causes my browser to hang. Is there a method available to virtua ...

Tips for creating a specific type for a generic class constructor in TypeScript or incorporating generics with utility types

Within my code, I have a registry that stores class constructors and is used to create instances of these classes. To make it possible for the registry to handle any class that extends Base, I implemented a generic class called Registry which infers its re ...

Issue: Missing provider for t specifically when running in production mode

I've been researching and found that missing modules or services could be the cause of this issue, but I have double-checked and everything seems to be in order. Here is the complete error message: vendor.96643eaf6ee79e7b894d.bundle.js:1 ERROR Error ...

Next13, varying data retrieval outcomes between server and client

Embarking on a project with Next13 has been smooth sailing so far. However, as a beginner, I am puzzled by the discrepancy in results I am obtaining from fetching data. Despite setting the component to render on the client side, it also renders on the serv ...

Ways to import images in angular outside the standard assets directory

I am encountering an issue with a folder directory structure as shown in the image below: https://i.sstatic.net/KVFVc.png In the HTML code, I have included the image path which is as follows: <img class="img-fluid" src="../../ecommerce/a ...

What is the best way to retrieve a member from a union type?

Here is a simple example to illustrate the problem: // library.d.ts import type { Bar } from './bar.d.ts'; export interface Foo { bar?: string | Bar | boolean; // and many other properties } // bar.d.ts export interface Bar { baz?: number ...

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...