Inject ViewChild using MaterialStepperComponent

[mobilemindtec]

Hi,

How can I inject a component into MaterialStepperComponent?

In this code MyCustomComopnent is not injected:

@Component(
  selector: 'my-steps',                
  template: '''
		<material-stepper #stepperComponent legalJumps="backwards" orientation="vertical" size="mini">
		  
		  <template step name="My Step">
		  
		      <div class="ng-step">
		        <my-custom-component>
		  
		        </my-custom-component>
		      </div>

		  </template>
		</material-stepper>  
  ''',  
  providers: [
    scrollHostProviders,
    materialProviders,
  ],
  pipes: [commonPipes],
  directives: [
    coreDirectives,
    formDirectives,
    MaterialStepperComponent,
    StepDirective,    
    MyCustomComponent,      
  ],  
)
class MyStepsCreateStepsComponent{

	  @ViewChild(MyCustomComponent)
	  MyCustomComponent myCustomComponent; // this is not injected



}

Thanks!

[TedSander]

The architecture of the stepper isn't optional. It actually re-parents the content of a view to the step itself. See warning here: https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_stepper/material_step.dart#L14

I don't see us fixing this limitation anytime soon as the architecture of the component would need to change greatly. So unless we have a bigger refactor/rewrite of the stepper which isn't planned we will have to live with this.

[mobilemindtec]

Hi @TedSander,

Thanks for the answer! have any other way to get the MyCustomComponent?