Angular 2 Tutorial (2016) - Angular 2 & jQuery (use with caution!)
Why Stack Overflow recommends it
Stack Overflow users link it when answering how to get jQuery plugins (Parsley, Materialize SideNav and similar) working inside an Angular 2 or Ionic 2 app.
Recommended by 2 people across 2 different months, 2016 to 2016.
What it is
A short 2016 Angular 2 (beta) tutorial from the Academind channel showing how to load jQuery and call it from an Angular 2 component. The presenter warns that this should be rare since Angular is meant to be the only thing manipulating the DOM.
What people said
Recommends Dimple · 2016-04 · Stack Overflow · on “Materialize CSS SideNav”
The problem is with angular. Angular don't support jquery and you have to make some adjustment according to it. Delete init.js file. In main.ts import import { Component, OnInit, ElementRef} from 'angular2/core'; declare variable: declare var jQuery: any; implement your class with OnInit add following code: export class AppComponent implements OnInit{ constructor(private el:ElementRef){} ngOnInit() { jQuery(this.el.nativeElement).find('.button-collapse').sideNav(); } } ` For more info watch video [this video] Plunker [LINK]
Recommends gogopower · 2016-07 · Stack Overflow · on “Angular 2 with parsley.js validation can't block the submit button”
I've found the way to do that. In ngOnInit(), I should get the instance of parsley by: // initialize parsleyjs to validate the input this.instance = jQuery('.parsleyjs').parsley(); Then, in the onSubmit() function: onSubmit(){ if(this.instance.isValid()){ // TODO: submit form to server }else { console.log("do nothing"); } } I should figure out how to use jQuery and parsley in angular 2 first and then try to implement them on my app. Hope this will help others. Thank you. By the way, here is good video about how to use jQuery in angular 2. [this video]
Cites aaaaaaaaax10 · 2016-11 · Stack Overflow · on “ionic2 EXCEPTION: jQuery is not defined”
i can't include Jquery, tried to do by this video: [this video] 1) included scripts to Index.html: <script src=" [LINK] "></script> <script src=" [LINK] "></script> 2) import { Component, ElementRef, Renderer, ViewChild } from '@angular/core'; import { HomePage } from '../home/home'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; import { RegistrationPage } from '../registration/registration'; declare var jQuery: any; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { // this tells the tabs component which Pages // should be each tab's root Page tab1Root: any = HomePage; tab2Root: any = AboutPage; tab3Root: any = ContactPage; constructo