Call Jquery Method inside Component Angular 2

Question

I need to call a Jquery method inside an angular component, this is the scenario:

I want to use Materialize CSS framework toast feature:

eg:

Materialize.toast('toast content', 3000);

I tried to do like that:

ngAfterViewInit() {
  $(this.elementRef.nativeElement.Materialize.toast('toast content', 3000));
}

My console output is:

TypeError: Cannot read property 'toast' of undefined

I don't know Materialize. Why do you think the element has a Materialize property? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 12, 2016 at 17:23
Because I imported the materialize.min.js into the index.html file, is it wrong? — Marcos J.C Kichel
– Marcos J.C Kichel, Commented Jan 12, 2016 at 17:24
From the docs it looks like just Materialize.toast('toast content', 3000); should do it — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 12, 2016 at 17:27
it gives me a compilation error on the Atom IDE when I try that — Marcos J.C Kichel
– Marcos J.C Kichel, Commented Jan 12, 2016 at 17:34

Günter Zöchbauer · Accepted Answer · 2016-01-12 17:44:10Z

3

If you must

class MyComponent implements AfterViewInit {
  constructor(private _elementRef: ElementRef) {
  }
  ngAfterViewInit() {
    $(this._elementRef.nativeElement)...
  }
}

You might also need to disable view encapsulation

@Component({
  selector: 'zippy',
  templateUrl: 'zippy.html',
  styles: [`
    .zippy {
      background: green;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

For more details see http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

You should be aware that direct DOM access is discouraged in Angular2 because it prevents running in web worker and server rendering. Also issues with are to be expected using jQuery.

edited Jan 12, 2016 at 17:44

answered Jan 12, 2016 at 17:06

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Mark Rajcok Over a year ago

Would it be better to put the jQuery call in ngAfterViewInit()?

Marcos J.C Kichel Over a year ago

Thanks guys, but in this special case it aint working, I am updating the question with more details ok?

Marcos J.C Kichel Over a year ago

Edited with more details

Collectives™ on Stack Overflow

Call Jquery Method inside Component Angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related