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

-2 votes133 views1 answer
Typescript parse to string
TypeScript
0 vote132 views1 answer
Copy text from file to another file in javascript with fs
TypeScript
1 vote121 views1 answer
Python requests cookies to selenium
TypeScript
0 vote118 views1 answer
Typescript dynamic type
TypeScript
0 vote84 views1 answer
NFS is reporting that your exports file is invalid. Vagrant does this check before making any changes to the file. Please correct the issues below and execute "vagrant reload":
TypeScript
1 vote128 views1 answer
Angular conditional pipe
TypeScript
1 vote128 views1 answer
How to target all child elements css
TypeScript
2 votes128 views1 answer
Mat-form-field email validation
TypeScript
1 vote122 views1 answer
Should robots have faces?
TypeScript
0 vote174 views1 answer
Typescript checkbox event
TypeScript