Unable to register a component with $mdStepper() service

[shikshik]

I guess it is related to versions of libraries, please confirm or tell me what i'm doing wrong: Angular: 1.6.4 Angular Material: 1.1.4

I just copied your HTML demo and in the JS file: const steppers = $mdStepper('demo-stepper');

Console error: No instance found for handle demo-stepper

When printing out "steppers" it returns null.

Can you please mention minimum / maximum dependencies versions? Thanks!

[eberlitz]

When doing const steppers = $mdStepper('demo-stepper'); the string 'demo-stepper' should be de element id of the stepper in the html. Besides that, could be something related to the version of the angular. I never tested with the 1.6.X version.

Currently, I'm using:

"angular": "github:angular/bower-angular@^1.5.7", "angular-material": "npm:[email protected]",

[shikshik]

I do understand it's the id. So i guess it's just a version issue. Will do a PR if i will manage to fix it.

[shikshik]

Good news: It does work with Angular 1.6.4 & Angular Material 1.1.4 (The latest versions up to today).

Bad news: I had to use $mdComponentRegistry.when(selector). For some reason the order of initialization of components/controllers/views isn't so good in Angular (at least with my app configuration). I've seen similar issues with material sideNav, and all solutions were using $mdComponentRegistry.when to check if selector exists (async).

More information for others who get same issue: I'm using ui-router as well (which I think could affect initialization).

Hope it helps... Please update if you manage to override it and proper fix this issue.

Thanks.

[walterspieler]

I confirm that @shikshik solution with $mdComponentRegistry works.

my code to make it work under angular 1.6.5 :

this.$mdComponentRegistry.when('stepper').then(() => {
  this.steppers = this.$mdStepper('stepper');
});