Como usar o jQuery com Angular?

Alguém pode me dizer, como usar o jQuery com Angular ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

Estou ciente de que existem soluções alternativas, como manipular a classe ou o ID do elemento DOM antecipadamente, mas espero uma maneira mais limpa de fazer isso.

Usar o jQuery do Angular2 é muito fácil comparado ao ng1. Se você estiver usando o TypeScript, poderá primeiro fazer referência à definição de texto datilografado do jQuery.

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

As definições de TypeScript não são necessárias, pois você pode usar apenas anycomo o tipo para $oujQuery

No seu componente angular, você deve referenciar um elemento DOM do modelo usando @ViewChild()Depois que a visualização foi inicializada, você pode usar a nativeElementpropriedade desse objeto e passar para o jQuery.

Declarar $(ou jQuery) como JQueryStatic fornecerá uma referência digitada ao 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);

Este exemplo está disponível no plunker: http://plnkr.co/edit/Nq9LnK?p=preview

O tslint se queixará de chosennão ser uma propriedade em $. Para corrigir isso, você pode adicionar uma definição à interface JQuery no seu arquivo * .d.ts personalizado

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

Por que todo mundo está fazendo disso uma ciência de foguetes? Para qualquer pessoa que precise fazer algumas coisas básicas sobre elementos estáticos, por exemplo, bodytag, faça o seguinte:

1. No index.html, adicione scripttag com o caminho para sua jquery lib, não importa onde (dessa forma, você também pode usar tags condicionais do IE para carregar a versão inferior do jquery para o IE9 e menos).
2. No seu export componentbloco, tenha uma função que chama seu código: $("body").addClass("done");Normalmente, isso causa erro de declaração; logo, depois de todas as importações nesse arquivo .ts, adicione declare var $:any;e você estará pronto !

Isto é o que funcionou para mim.

PASSO 1 - Primeiras coisas primeiro

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

PASSO 2 - IMPORTAÇÃO

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

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

#UPDATE - Feb - 2017

Ultimamente, eu estou escrevendo código com ES6em vez de typescripte sou capaz de import, sem * as $no import statement. É assim que parece agora:

import $ from 'jquery';
//
$('#elemId').width();

Boa sorte.

Agora ficou muito fácil. Você pode fazer isso simplesmente declarando a variável jQuery com qualquer tipo dentro do controlador Angular2.

declare var jQuery:any;

Adicione isso logo após as instruções de importação e antes do decorador de componentes.

Para acessar qualquer elemento com o ID X ou Classe X, basta fazer

jQuery("#X or .X").someFunc();

Uma maneira simples:

1. inclui script

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. declarar

my.component.ts

declare var $: any;

3. use

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Por favor, siga estes passos simples. Funcionou para mim. Vamos começar com um novo aplicativo angular 2 para evitar qualquer confusão. Estou usando o Angular cli. Portanto, instale-o se ainda não o tiver. https://cli.angular.io/

Etapa 1: criar um aplicativo demo angular 2

ng new jquery-demo

Você pode usar qualquer nome. Agora verifique se está funcionando executando abaixo do cmd (agora, verifique se está apontando para 'jquery-demo' se não usar o comando cd)

ng serve

você verá "o aplicativo funciona!" no navegador.

Etapa 2: Instalar o Bower (um gerenciador de pacotes para a web)

Execute este comando no cli (certifique-se de que está apontando para 'jquery-demo' se não usar o comando cd):

npm i -g bower --save

Agora, após a instalação bem-sucedida do bower, crie um arquivo 'bower.json' usando o comando abaixo:

bower init

Ele solicitará entradas, basta pressionar enter para todos, se você quiser valores padrão e, no final, digite "Yes" quando perguntar "Parece bom?"

Agora você pode ver um novo arquivo (bower.json) na pasta "jquery-demo". Você pode encontrar mais informações em https://bower.io/

Etapa 3: Instalar o jquery

Execute este comando

bower install jquery --save

Ele criará uma nova pasta (bower_components) que conterá a pasta de instalação do jquery. Agora você tem o jquery instalado na pasta 'bower_components'.

Etapa 4: adicione o local do jquery no arquivo 'angular-cli.json'

Abra o arquivo 'angular-cli.json' (presente na pasta 'jquery-demo') e adicione o local da jquery em "scripts". Isso parecerá assim:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Etapa 5: escreva código jquery simples para teste

Abra o arquivo 'app.component.html' e adicione uma linha de código simples. O arquivo terá a seguinte aparência:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Agora abra o arquivo 'app.component.ts' e adicione a declaração e código da variável jquery para a tag 'p'. Você também deve usar o gancho de ciclo de vida ngAfterViewInit (). Após fazer as alterações, o arquivo ficará assim:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Agora execute seu aplicativo angular 2 usando o comando 'ng serve' e teste-o. Deveria funcionar.

Você pode implementar o gancho do ciclo de vida ngAfterViewInit () para adicionar algumas manipulações DOM

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Cuidado ao usar o roteador, pois angular2 pode reciclar visualizações. Portanto, você deve ter certeza de que as manipulações dos elementos DOM são feitas apenas na primeira chamada de afterViewInit. (Você pode usar variáveis ​​booleanas estáticas para fazer isso)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Eu faço isso de maneira mais simples - primeiro instale o jquery pelo npm no console: npm install jquery -Se depois no arquivo componente eu apenas escrevo: let $ = require('.../jquery.min.js')e funciona! Aqui exemplo completo de alguns dos meus códigos:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

No teplate eu tenho, por exemplo:

<div class="departments-connections-graph">something...</div>

EDITAR

Como alternativa, em vez de usar:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

usar

declare var $: any;

e no seu index.html coloque:

<script src="assets/js/jquery-2.1.1.js"></script>

Isso inicializará o jquery apenas uma vez globalmente - isso é importante, por exemplo, para o uso de janelas modais no bootstrap ...

etapa 1: use o comando: npm install jquery --save

Etapa 2: você pode simplesmente importar angular como:

importar $ de 'jquery';

Isso é tudo .

Um exemplo seria:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// instalando o jquerynpm install jquery --save

// instalando a definição de tipo para o jquerytypings install dt~jquery --global --save

// adicionando a biblioteca jquery ao arquivo de configuração de compilação, conforme especificado (no arquivo "angular-cli-build.js")

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// execute a construção para adicionar a biblioteca jquery na construção ng build

// adicionando a configuração do caminho relativo (em system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// importa a biblioteca jquery no seu arquivo componente

import 'jquery';

abaixo está o trecho de código do meu componente de amostra

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Se você usa angular-cli, pode fazer:

1. Instale a dependência :

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. Importe o arquivo :

   Adicione "../node_modules/jquery/dist/jquery.min.js" à seção "script" no arquivo .angular-cli.json

3. Declarar jquery :

   Adicione "$" à seção "types" do tsconfig.app.json

Você pode encontrar mais detalhes sobre o documento oficial do angular cli

Para usar o Jquery no Angular2 (4)

Siga estes ajustes

instale a definição de tipo Jquery e Juqry

Para instalação do Jquery npm install jquery --save

Para instalação da definição de tipo Jquery npm install @types/jquery --save-dev

e então simplesmente importe o jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Usando o Angular Cli

 npm install jquery --save

Em angular.json, na matriz de scripts

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Agora, para usar o jQuery, tudo o que você precisa fazer é importá-lo da seguinte maneira em qualquer componente que você deseja usar o jQuery.

Por exemplo, importando e usando jQuery no componente raiz

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Como sou burra, pensei que seria bom ter algum código funcionando.

Além disso, a versão de tipografia Angular2 do transferidor angular tem problemas com o jQuery $ , portanto, a resposta mais aceita não me fornece uma compilação limpa.

Aqui estão as etapas que eu tenho para trabalhar:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

Por dentro do my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Apenas escreva

declare var $:any;

depois de todas as seções de importação, você pode usar o jQuery e incluir a biblioteca jQuery na sua página index.html

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

funcionou para mim

1) Para acessar o DOM no componente.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

Você pode incluir o jQuery da seguinte maneira. 2) Inclua seu arquivo jquery em index.html antes do carregamento do angular2

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Você pode usar o Jquery da seguinte maneira: Aqui estou usando o seletor de datas do JQuery Ui.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

Este trabalho para mim.

Estou ignorando a instalação do jquery, pois esse ponto foi mencionado em todas as postagens criadas antes da minha. Então, você já instalou o jquery. Importando t para seu componente como este

import * as $ from 'jquery';

funcionará, mas há outra maneira "angular" de fazer isso criando um serviço.

Etapa no. 1: crie o arquivo jquery.service.ts .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Degrau. não. 2: registre o serviço em app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Etapa no. 3: injete o serviço no seu componente my-super-duper.component.ts

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Ficarei muito grato se alguém puder explicar os prós e os contras dos dois métodos: DI jquery como um serviço vs. import * como $ from 'jquery';

A maneira mais eficaz que encontrei é usar setTimeout com tempo 0 dentro do construtor de página / componente. Isso permite que o jQuery seja executado no próximo ciclo de execução depois que o Angular terminar de carregar todos os componentes filhos. Alguns outros métodos de componentes podem ser usados, mas tudo o que tentei funciona melhor quando executado dentro de um setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Aqui está o que funcionou para mim - Angular 2 com webpack

Tentei declarar $como tipo, anymas sempre que tentei usar qualquer módulo JQuery que estava recebendo (por exemplo) $(..).datepicker()não é uma função

Como eu incluí o Jquery no meu arquivo vendor.ts, simplesmente o importei para o meu componente usando

import * as $ from 'jquery';

Agora posso usar plugins Jquery (como bootstrap-datetimepicker) agora

Você também pode tentar importá-lo com o "InjectionToken". Conforme descrito aqui: Use jQuery em Angular / Typescript sem uma definição de tipo

Você pode simplesmente injetar a instância global do jQuery e usá-la. Para isso, você não precisará de definições ou tipos de tipo.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Quando definido corretamente em seu app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Você pode começar a usá-lo em seus componentes:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Instalação da Biblioteca Global como documentação oficial aqui

1. Instale a partir do npm:

   npm install jquery --save

2. Adicione os arquivos de script necessários aos scripts:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Reinicie o servidor se você estiver executando, e ele deve estar funcionando no seu aplicativo.

Se você deseja usar dentro de um único componente, use import $ from 'jquery';dentro de seu componente

Outros já postaram. mas dou um exemplo simples aqui para ajudar alguns novos participantes.

Etapa 1: no arquivo index.html, referência jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Etapa 2: suponha que queremos mostrar div ou ocultar div ao clicar em um botão:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Etapa 3: no arquivo de componente abaixo, a importação declara $ como abaixo:

declare var $: any;

do que criar uma função como abaixo:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Ele funcionará com as mais recentes Angular e JQuery

Primeiro, instale o jQuery usando o npm da seguinte maneira:

npm install jquery — save

Segundo, vá para o arquivo ./angular-cli.json na raiz da pasta do seu projeto Angular CLI e encontre a propriedade scripts: [] e inclua o caminho para o jQuery da seguinte maneira:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Agora, para usar o jQuery, tudo o que você precisa fazer é importá-lo em qualquer componente que você deseja usar o jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

Dê uma olhada no código abaixo que usa o jQuery para animar div ao clicar, especialmente na segunda linha. Estamos importando tudo como $ do jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Instalar jquery

Terminal $ npm install jquery

(Para inicialização 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Em seguida, adicione a importdeclaração a app.module.ts.

import 'jquery'

(Para inicialização 4 ...)

import 'popper.js'
import 'bootstrap'

Agora você não precisará mais de <SCRIPT>tags para fazer referência ao JavaScript.

(Qualquer CSS que você deseja usar ainda precisa ser mencionado styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Ao usar o Angular, tente não usar a biblioteca jquery. Tente usar os recursos e as bibliotecas que são produzidas para a estrutura angular. Se você quiser usar as funções jquery como find () , html () , closest () e etc.), sugiro usar os js puros. exemplo: querySelector () , innerHTML , parentElement e etc ...