CODEWITHSUNDEEP
angularmaterialize
Matthias Herrmann
Matthias Herrmann

Reputation: 2790

Angular Material 2 Included Jquery Code In Component Not Working

I set up a project with angular2-materialize. The navigation on the webpage should be handled by the HamburgerMenuComponent.

So I started to include this sidebar: SideNav - Materialize

It is working fine when I'm manually inserting $(".button-collapse").sideNav(); in the browser-console. But I can't figure out how to include it to the HamburgerMenuComponent.

This is what I tried so far but it is not working:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-hamburger-menu',
  templateUrl: './hamburger-menu.component.html',
  styleUrls: ['./hamburger-menu.component.css']
})
export class HamburgerMenuComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
     $(".button-collapse").sideNav();
  }
}

AppComponent.html:1 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery(...).sideNav is not a function

Upvotes: 1

Views: 175

Answers (1)

SrAxi
SrAxi

Reputation: 20015

Try editing your vendor.ts (newer Angular-cli uses lib.ts instead, but is the same) and then recompile:

// jQuery
declare let jQuery: any;

// Dependencies
window['jQuery'] = require('jquery');
window['$'] = window['jQuery'];
import 'jquery-ui-npm/jquery-ui.min.js'

And in your component ad this after all imports:

declare let $: any;

Upvotes: 1

Related Questions