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 vote124 views1 answer
Typescript merge union type props
TypeScript
2 votes131 views2 answers
Typescript on window resize
TypeScript
1 vote137 views2 answers
The server time zone value 'FLE' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more
TypeScript
0 vote185 views1 answer
Try out the enumerate function for yourself in this quick exercise. Complete the skip_elements function to return every other element from the list, this time using the enumerate function to check if an element is on an even position or an odd positi
TypeScript
1 vote162 views1 answer
Conditional (click) action angular
TypeScript
0 vote165 views1 answer
Function printprops(o) { for(var p in o) console.log(p + ": " + o[p] + "\n"); } What will the above code snippet result ? Prints the contents of each property of o Returns undefined Both a and b None of the mentioned
TypeScript
0 vote152 views1 answer
Interaction of pc hardware components in the pc boot
TypeScript
6 votes139 views1 answer
Typescript replace
TypeScript
0 vote136 views2 answers
Spritesheets in pyqt
TypeScript
0 vote131 views1 answer
Cannot read property 'bypassSecurityTrustResourceUrl'
TypeScript