Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to use MatStepper with transclusion

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Since there is not currently a responsive stepper, I am attempting to write a component that will switch between a horizontal and vertical stepper depending on the size of the viewport. My idea was that the responsive-stepper would not define any steps inside it. It would use *ngIf to determine which stepper to render, and then use <ng-content> transclusion to allow other components to include the actual steps.

What is the current behavior?

When I attempt to use <mat-step> outside of a stepper, I get an error No provider for MatStepper. I have set up a stackblitz reproduction of the bug, the error is visible in the console.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-dfvcxd

What is the use-case or motivation for changing an existing behavior?

I’m working in an enterprise and I’d like to be able to define a responsive stepper component once, and let others reuse it in a generic fashion. I’m open to other strategies to achieve this.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material beta 12

Is there anything else we should know?

Issue Analytics

State:
Created 6 years ago
Reactions:17
Comments:10 (3 by maintainers)

Top GitHub Comments

7reactions

tbnovaescommented, Dec 3, 2018

any updates on this one?

1reaction

geyuqiucommented, Aug 19, 2019

@cmsImagine could you please tell us more about your solution (in code)?

Top Results From Across the Web

Switch between vertical and horizontal stepper material

I wanted to do the same thing and finally figured out how to get it to work, with complete transclusion for the steps,...

Transclusion Solution. by Bill Girten and Steven Scroczynski

In this article, we'll show how to use Angular 6 Transclusion to easily make components reusable and flexible. We'll code up two components, ......

Map is not working inside angular material mat-stepper ...

Keeping an eye on transcluded content, if the element you want is in the current component, you should use the ViewChild decorator to...

Stepper - Angular Material

Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization. completedLabel: string....

Cannot Project ≪Mat-Error≫S Into A Custom Component - ADocLib

See how to use a form with a custom ErrorStateMatcher If you wish to override ... toast angular material import chip angular send...