How to use Angular with jQuery?

Small tutorial on how to combine jQuery with Angular, with code examples and video
04 September 2017   1974

If you are using TypeScript you could first reference jQuery typescript definition.

tsd install jquery --save
typings install dt~jquery --global --save

TypescriptDefinitions are not required since you could just use any as the type for $ or jQuery

In your angular component you should reference a DOM element from the template using @ViewChild() After the view has been initialized you can use the nativeElement property of this object and pass to jQuery.

Declaring $ (or jQuery) as JQueryStatic will give you a typed reference to jQuery.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        <h4> {{selectedValue}}</h4>`
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
            .on('change', (e, args) => {
                this.selectedValue = args.selected;


tslint will complain about chosen not being a property on $, to fix this you can add a definition to the JQuery interface in your custom *.d.ts file

interface JQuery {

WebStorm IDE to Get New Update

Version 2018.3 of one of the JetBrain's IDE has many new features and updates
22 November 2018   302

JetBrains has introduced an update to the WebStorm integrated development environment. In version 2018.3, support for TypeScript 3.1, JSON format, as well as the ability to pull Requests for GitHub are implemented.

The main innovations WebStorm 2018.3:

  • Automatic import of characters from project dependencies in JavaScript, parameters have hints. Improved null and undefined checks.
  • New function "Suggest variable names."
  • TypeScript 3.1 support.
  • An accessibility check for HTML added. Also, developers have improved the removal of actions for HTML and JSX tags — the user no longer needs to start reformatting the code or do it manually.
  • Data from CSS files can be transferred to other files.
  • WebStorm now warns about undefined components of React.
  • Added support for Vuetify in the framework Vue.js.
  • In Node.js, an experimental function of workflows has appeared - they can be used for tasks that heavily load CPUs.

The changes also affected the development environment itself. For example, support for interceptions and pull requests for GitHub. Users have access to a new contrast theme.

In March 2018, version 2018.1 was released. In it, the developers added support for the Prettier code formatting service, as well as compact pop-up notifications with documentation for all supported languages