Getting started with Angular 2 Dynamically add components using ViewContainerRef.createComponent Pipes Routing (3.0.0+)Http Interceptor Directives Installing 3rd party plugins with [email protected]Testing an Angular 2 App Routing Optimizing rendering using ChangeDetectionStrategy Lifecycle Hooks Directives & components : @Input @Output Angular RXJS Subjects and Observables with API requests Zone.js Services and Dependency Injection Angular 2 Forms Update Detecting resize events Bootstrap Empty module in angular 2 Advanced Component Examples Bypassing Sanitizing for trusted values Angular2 Custom Validations Angular 2 Data Driven Forms Angular - ForLoop Feature Modules Angular2 In Memory Web API Ahead-of-time (AOT) compilation with Angular 2 Debugging Angular2 typescript application using Visual Studio Code CRUD in Angular2 with Restful API Component interactions Use native webcomponents in Angular 2 Lazy loading a module Update typings Mocking @ngrx/Store How to use ngfor ngrx Animation Commonly built-in directives and services How to Use ngif Testing ngModel Create an Angular 2+ NPM package Angular2 CanActivate Angular 2 - Protractor Example for routes such as /route/subroute for static urls Angular2 Input() output()Page title unit testing Angular-cli OrderBy Pipe Angular2 Animations Angular 2 Change detection and manual triggering Angular2 Databinding Brute Force Upgrading EventEmitter Service Angular2 provide external data to App before bootstrap Using third party libraries like jQuery in Angular 2 Component interactions Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.Templates Configuring ASP.net Core application to work with Angular 2 and TypeScript Angular2 using webpack Angular material design Dropzone in Angular2 custom ngx-bootstrap datepicker + input angular redux Creating an Angular npm library Barrel angular-cli test coverage Service Worker Components Modules

Using third party libraries like jQuery in Angular 2

Configuration using angular-cli

NPM

If external library like jQuery is installed using NPM

npm install --save jquery

Add script path into your angular-cli.json

"scripts": [
    "../node_modules/jquery/dist/jquery.js"
]

Assets Folder

You can also save the library file in your assets/js directory and include the same in angular-cli.json

"scripts": [
    "assets/js/jquery.js"
]

Note

Save your main library jquery and their dependencies like jquery-cycle-plugin into the assets directory and add both of them into angular-cli.json, make sure the order is maintained for the dependencies.

Using jQuery in Angular 2.x components

To use jquery in your Angular 2.x components, declare a global variable on the top

If using $ for jQuery

declare var $: any;

If using jQuery for jQuery

declare var jQuery: any

This will allow using $ or jQuery into your Angular 2.x component.

Contributors

Topic Id: 9285

Example Ids: 28757,28758

This site is not affiliated with any of the contributors.