Utilize declare var $: any;
antes da declaração da Classe.
Exemplo:
import { Component } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-modulo',
templateUrl: './modulo.component.html',
styleUrls: ['./modulo.component.scss']
})
export class ModuloComponent
{
constructor(){}
onViewChecked(){
$(".classe-escolhida").click(function(){
alert("Clicado");
});
}
}
Edit:
Minha resposta anterior era baseada na solução de contorno para o Angular reconhecer o jQuery, considerando que o mesmo já estivesse instalado e configurado para ser carregado na aplicação. Vamos a uma resposta mais completa:
Em primeiro lugar, instale o pacote usando NPM ou Yarn:
npm install jquery --save
ou yarn add jquery
Posteriormente, em seu angular.json
, carregue o script do jQuery:
"scripts": ["../node_modules/jquery/dist/jquery.min.js"]
Onde exatamente isso será inserido dependerá um pouco da versão do Angular que está usando (em versões mais antigas, o arquivo inclusive é o .angular-cli.json
). No caso da versão mais recente no momento que escrevo esse Edit (v13), fica no JSON em projects.$name.architect.build.options
.
Por fim, inclua em seu componente:
import * as $ from 'jquery';
Em alguns casos, para resolver os problemas de validação no Typescript, ainda será necessário instalar a definição de tipos do jQuery: npm install --save-dev @types/jquery
ou yarn add -D @types/jquery
.
Feita a importação do jQuery e a devida configuração de tipos (types), inclua em um dos hooks (recomendo o ngAfterContentInit) o código jQuery que deseja, como no exemplo abaixo:
import { AfterContentInit, Component } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-modulo',
templateUrl: './modulo.component.html',
styleUrls: ['./modulo.component.scss']
})
export class ModuloComponent implements AfterContentInit
{
constructor(){}
ngAfterContentInit(): void
{
$(".classe-escolhida").click(function(){
alert("Clicado");
});
}
}
Espero que isso possa ajudar :-)