How to use jQuery with Angular? -


can tell me, how use jquery angular?

class mycomponent {     constructor() {         // how query dom element here?     } }

i'm aware there workarounds manipulating class or id of dom element upfront, i'm hoping cleaner way of doing it.

using jquery angular2 breeze compared ng1. if using typescript first reference jquery typescript definition.

tsd install jquery --save or typings install dt~jquery --global --save

typescriptdefinitions not required since use any type $ or jquery

in angular component should reference dom element template using @viewchild() after view has been initialized can use nativeelement property of object , pass jquery.

declaring $ (or jquery) jquerystatic give typed reference jquery. 

import {bootstrap}    '@angular/platform-browser-dynamic'; import {component, viewchild, elementref, afterviewinit} '@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);

this example available on plunker: http://plnkr.co/edit/nq9lnk?p=preview

tslint complain chosen not being property on $, fix can add definition jquery interface in custom *.d.ts file

interface jquery {     chosen(options?:any):jquery; }

Comments

Post a Comment

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more