-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Unable to use MatStepper with transclusion #8014
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
I have never test it, but you could try, instead of [EDIT]: It won't work for the reason described above: https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-horizontal.html |
Thanks for the suggestion, I did give it a shot but that didn't work either (as I saw you just commented). I started down the path of just having 2 steppers inside my component, using ngIf to hide them, and then to avoid duplicating logic, pulling out the content of the <mat-card>
<mat-card-content>
<mat-horizontal-stepper linear="true" *ngIf="facade.largeScreen">
<mat-step label="Verify Account" [stepControl]="verify.group">
<dash-password-verify #verify></dash-password-verify>
</mat-step>
<mat-step label="New Password">
<dash-password-choose></dash-password-choose>
</mat-step>
<mat-step label="Secondary Email">
<dash-password-email></dash-password-email>
</mat-step>
</mat-horizontal-stepper>
<mat-vertical-stepper linear="true" *ngIf="!facade.largeScreen">
<mat-step label="Verify Account" [stepControl]="verify.group">
<dash-password-verify></dash-password-verify>
</mat-step>
<mat-step label="New Password">
<dash-password-choose></dash-password-choose>
</mat-step>
<mat-step label="Secondary Email">
<dash-password-email></dash-password-email>
</mat-step>
</mat-vertical-stepper>
</mat-card-content>
</mat-card> However, I think that will have its own set of issues. When one component is destroyed, I think I'm going to end up losing the user's form state, unless I put in code to manage it separately. The same problems would apply if I were to use fxShow/fxHide from @angular/flex-layout, since there would be two instances of the controls. It sounds like the only way forward at this time is to have the form/forms contained within a single component, and duplicate the markup for both steppers, which is less than ideal. |
@rpd10 I think this may be possible if You may also be able to create your own implementation of MatStepper that adds the correct classes and animations, |
any updates on this one? |
I got around this for now by having an |
@cmsImagine could you please tell us more about your solution (in code)? |
any updates on this one? x2 |
I didn't find a way to transclude the full template, but if you're looking to just transclude everything but the title and the previous/next buttons, then this worked:
|
This is a limitation of Angular's content projection. angular/angular#37319 has been filed to hopefully improve some of the short-comings |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 errorNo 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?
The text was updated successfully, but these errors were encountered: