Angular 6, Materialize: initializing javascript

Question

I am new to Angular and Materialize. I am trying to initialize a carousel within my Angular component.

Materialize mentions three ways:

M.AutoInit();

or

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

or

  $(document).ready(function(){
    $('.carousel').carousel();
  });

I have installed Materialize via node. I have both its CSS and JS as dependencies in my angular.json folder. The CSS styling works. I have tried these three methods within my ngOnInit lifecycle hook within my component. "M" is not recognized. I tried importing materialize:

import { materialize } from '../../../node_modules/materialize-css'

and

let m = materialize;

But this hasn't worked either.

I then installed jquery as a depedency and tried that method, but that doesn't seem to work either.

Share your code on stackblitz.com ? just give this a try import 'materialize-css'; — Vivek Kumar
– Vivek Kumar, Commented Oct 11, 2018 at 21:38

Darryl Mendonez · Accepted Answer · 2019-11-26 19:36:15Z

2

import OnInit from @angular/core library
declare const M: any; underneath imports
fire the M.AutoInit() function in ngOnInit() lifecycle hook

Example (where the component name is MediaComponent):

import { Component, OnInit } from '@angular/core';

declare const M: any;

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

  constructor() { }

  ngOnInit() {
    M.AutoInit();
  }

}

answered Nov 26, 2019 at 19:36

Darryl Mendonez

1,1711 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Brand · Accepted Answer · 2018-10-11 22:04:20Z

1

You should use the Materialize for Angular library. Asking how to use jQuery with Angular can get you a lot of downvotes.

https://www.npmjs.com/package/angular2-materialize

answered Oct 11, 2018 at 22:04

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

Miles Moran Over a year ago

I did not want to use jquery. I mentioned it only because after the first method of initializing didn't seem to work. I used the Materialize library for angular.

jojoj · Accepted Answer · 2019-01-18 00:36:56Z

0

import { Component, OnInit } from '@angular/core'; declare var M: any;

answered Jan 18, 2019 at 0:36

jojoj

1

1 Comment

Yunnosch Over a year ago

This is a so-called code-only answer and without an explanation of why it helps not appreciated. Also learning about formatting would be beneficial Take the tour as something of a good-luck-charm and read How to Answer.

Collectives™ on Stack Overflow

Angular 6, Materialize: initializing javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related