How to use Angular with jQuery?

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

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 {

TIOBE Index for July 2018 Released

Top programming lanuages for July 2018 index released: TypeScript continues to gain popularity 
09 July 2018   191

TypeScript entered the top 50 of the TIOBE index. A month earlier it appeared for the first time in the top 100 on line 93. TS is slowly catching up on the popularity of its competitor Dart from Google and behind it by 26 positions. TIOBE attribute this success to TypeScript with the popularity of the Angular framework, the latest versions of which are written in TS.

Objective-C returned to the top ten, Haskell - in the top 50. The scripting language Lua rose from 36 to 25 places. But F #, flew to the 36th line, losing 19 positions.

TIOBE July 2018 top 20
TIOBE July 2018 top 20

Since this month, two new programming languages have been added to the rating: Chapel and Pony. They took 97 and 173 places respectively.

TIOBE Index July 2018 Trends
TIOBE Index July 2018 Trends

The popularity of JavaScript is still high. All first half of 2018, the language spent in the top 10 and lost only 2 positions in February.

It is important to note that the rating does not show the "best" programming language, but only reflects the interest of IT industry representatives. The authors of TIOBE take into account the number of specialists around the world using a certain language, the number of language courses on educational resources, analyze the popularity of the AP with the help of the search engines of Google, Bing, Wikipedia, Amazon, YouTube, Baidu and others.