Como usar o jQuery com Angular

Como você usa o jQuery com sua app Angular?

O gui completo em como adicionar o jQuery em seu projeto Angular: com exemplos de código e explicações

Como você adiciona a biblioteca jQuery em seu projeto Angular?

E como fazer em menos de 5 minutos?

Nesse guia eu vou mostrar para você duas maneiras diferentes para instalar o jQuery e usar em seu projeto Angular.

1. Um método sujo e rápido.

Abra o arquivo index.html e insira a tag do script antes de fechar a tag do body, assim:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Angular Application</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" href="./assets/css/style.css">
    </head>
    <body>
        <app-root></app-root>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </body>
</html>

Em seu arquivo de componentes Typescript declare uma variável chamada jQuery. Desse jeito:

declare var jQuery: any;

Observe o exemplo completo abaixo.

import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";

declare var jQuery: any;

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

    constructor() {}

    ngOnInit() {
        jQuery("#myselector").style="display: none;";
    }
}

Uma vez declarada sua variável jQuery, você consegue usar em qualquer lugar em seus componentes lógicos para operar o DOM, etc.

Então o que a gente acabou de fazer?

Nós adicionamos o script jQuery em nosso arquivo index.html para ter certeza de que vai carregar o restante do nosso app. Isso permite o acesso para a variável chamada jQuery, mas para utilizar precisamos colocar ele no topo do nosso arquivo de componente lógico como any. Desse jeito o Typescript não vai ter erros.

2. O método limpo e elegante.

Execute o npm install --save-dev @types/jquery
Execute o npm install --save jquery
Em seu arquivo de componente importe jQuery onde quiser e use ele assim.

import * as $ from 'jquery';

Observe o exemplo completo abaixo.

import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";
import * as $ from 'jquery';

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
    constructor() {}
    ngOnInit() {
        $("#myselector").style="display: none;";
    }
}

3. Conclusão

Então é isso. Duas maneiras diferentes que você pode inserir em seu projeto Angular em menos de 5 minutos.

Dúvidas? Comentários? Não hesite em entrar em contato comigo.

Consultor e especialista em Angular e .NET Core