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

Answer 1

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.