Materialize: Initializing Select in Angular causes ERROR TypeError: $els.each is not a function

[hoomb]

I have included Materialize 1.0 Alpha in my Angular 5 Application by calling this command:

npm install [email protected] --save

Then in .angular-cli.json

"scripts": [
        "../node_modules/materialize-css/dist/js/materialize.min.js"
      ],

And then in my Component:

import { Component, OnInit } from '@angular/core';
import * as M from 'materialize-css';
import {AfterViewInit} from "@angular/core/src/metadata/lifecycle_hooks";

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    const elem = document.querySelector('select');

    M.Select.init(elem, '');
  }
}

in HTML:

  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>

And it causes this Exception:

ERROR TypeError: $els.each is not a function
at Function.init (materialize.js:11543)
at MyComponent.ngAfterViewInit (my.component.ts:17)

[hoomb]

Used this Command to install solved the Problem

npm install materialize-css@next --save

[DanielRuf]

Your selector and initialization is probably wrong.

[hoomb]

Really appreciate for your prompt answer.
How can I initialize the materialize-css in Angular4 in the way that I can execute this code:

    const elem = document.querySelector('select');

    M.Select.init(elem, '');