How to use Angular with jQuery?

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

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

tsd install jquery --save
or
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;

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

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

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 {
    chosen(options?:any):JQuery;
}    

How to command robots with Angular?

Sebastian Witalec, Technical Evangelist for Progress/Telerik talks about NativeScript framework
17 October 2017   293

NativeScript is a free and open source JavaScript framework for building native iOS and Android apps. Add to that Angular with TypeScript and you will get a truly amazing combination. Then chip in some drones and robots with a BLE API and you are ready to rock.

But I know what you’re thinking: another way of building apps? What makes NativeScript special? Here are a few cool things:

  • Direct access to native APIs—no plugins required. Want to create a file on Android? Run new java.io.File()—in JavaScript!
  • Completely native performance through the use of a JavaScript bridge natively available on all three mobile platforms.
  • Cross-platform libraries for common use cases. Need to call a JSON API? Run http.getJSON
  • Style native apps using CSS. Yep, that’s actually a thing.

Speaker is Sebastian Witalec. He is a Technical Evangelist for Progress/Telerik with over 8 years of experience in software engineering and architecture. Sebastian has passion for all types of technologies. However in the last few years his focus shifted towards cross platform Mobile development where he gained experience with Apache Cordova and NativeScript. He is always happy to learn about the new stuff and to pass the knowledge as far as his voice (or the wire) can take him. Sebastian is based in London, UK actively working with various Dev communities in the area. When not acting techie he is a massive football fan/player (probably bigger at heart than skills).