0

I am trying to use mdl-stepper in my Angular2 project. In my HTML:

    <li class="mdl-step">
        <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Step 2</span>
            </span>
        </span>
        <div class="mdl-step__content">
            <h4>Step 2</h4>
        </div>
        <div class="mdl-step__actions">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                Continue 
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                Cancel
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back 
            (click)="onstepback($event)">
                Back
            </button>
        </div>
    </li>

On back button click I am firing an event. In my home.component.ts file inside onbackstep(){} I have following:

var stepperElement = document.querySelector('ul.mdl-stepper');
var Stepper;

Stepper = stepperElement.MaterialStepper;

It gives me compilation error saying Property 'MaterialStepper' does not exist on type 'Element'

Do I have to import something?

Thinker
  • 5,326
  • 13
  • 61
  • 137

1 Answers1

0

Try using var stepperElement = document.querySelector(selector);

Its working for me. There is no error now.

apeksha kulkarni
  • 1
  • 1