Jquery in angular

How to use jquery in angular

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);

Source: stackoverflow.com

Use jquery in angular

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

=======================================(in angular)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

-1

Source: stackoverflow.com

Similar codes

1 vote201 views1 answer
Typescript style type
TypeScript
-3 votes267 views1 answer
Cool_beasts = {"octopuses":"tentacles", "dolphins":"fins", "rhinos":"horns"} for ___ in cool_beasts.items(): print("{} have {}".format(___))
TypeScript
0 vote202 views1 answer
How to show account related contacts on click of a button using lightnig components
TypeScript
0 vote183 views1 answer
Pointer vers dépots distants git hub
TypeScript
0 vote201 views1 answer
Css how to make a elements of same type start at same height
TypeScript
0 vote190 views1 answer
Pass command line arguments C#
TypeScript
6 votes173 views2 answers
Refused to apply style from 'http://localhost:9000/public/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
TypeScript
0 vote260 views1 answer
Vue bootstrap tooltip
TypeScript
0 vote201 views1 answer
Error Extracting tar content of undefined failed, the file appears to be corrupt: "EBUSY: resource busy or locked,
TypeScript
11 votes190 views2 answers
How to read a list in c# once its created
TypeScript