jquery_com_angular - VWJavascript/Alurapic GitHub Wiki

Jquery com angular

Nossa aplicação está cada vez melhor, contudo a remoção de fotos ocorre de maneira abrupta após confirmada. Para deixarmos nossos usuários ainda mais confortáveis com nossa aplicação podemos realizarmos um efeito de fade out, aquele no qual a imagem vai se tornando transparente até desaparecer. Podemos até pensar em uma solução 100% Angular combinando CSS dinamicamente, contudo adotaremos uma abordagem diferente.

Não é raro o desenvolvedor front-end que passa a utilizar o framework da Google ter alguma noção de jQuery, a biblioteca de manipulação de DOM mais famosa do mercado. Realizar um fade out não é complicado com jQuery, basta selecionarmos o elemento do DOM que desejamos aplicar o efeito para em seguida chamarmos a função fadeOut como no exemplo hipotético abaixo:

// exemplo hipotético, não entra em nenhum lugar da nossa aplicação.
$('div').fadeOut(function() {
   console.log('Realizou o fade out');
});

Apesar da equipe do Angular desencorajar a manipulação direta do DOM em nossa aplicação Angular, pode ser que em determinadas situações ela seja a melhor opção, mesmo que em casos raros. Saber acessar elementos do DOM e integrar nosso código do Angular com jQuery é algo que precisamos ter na manga para qualquer eventualidade, principalmente em sistemas nos quais boa parte das funcionalidades fazem uso do jQuery.

Baixando o jQuery pelo npm

Primeiro, precisamos baixar a biblioteca do jQuery e podemos fazer isso como npm, assim como fizemos com o Bootstrap. No terminal, e dentro da pasta alurapic/client vamos executar o comando

npm install [email protected] --save

Como qualquer dependência baixada pelo npm, o jQuery ficará dentro da pasta alurapic/client/node_modules. Vamos importá-lo em alurapic/client/index.html:

<!-- alurapic/client/index.html -->
<!doctype html>
<html>
    <head>
        <base href="/">
        <title>Alurapic</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">

       <!-- importando o jQuery -->

       <script src="node_modules/jquery/dist/jquery.js"></script>

       <!-- outros scripts omitidos -->

Como utilizaremos o jQuery? Como nossa foto é exibida dentro PainelComponent, que tal adicionarmos um método em sua classe que realiza o fade out para nós? Com isso, basta termos uma referência do painel em nosso código para em seguida chamarmos a nossa função. Porém, para que isso seja possível, precisamos ter uma referência do DOM do componente para que possamos manipulá-lo com jQuery.

Podemos solicitar ao sistema de injeção de dependências do Angular o elemento do DOM do nosso componente adicionando no construtor de PainelComponent um elemento do tipo ElementRef, só não podemos esquecer de importá-lo do módulo@angular/core, caso contrário nosso código não compilará.

Referência de elemento através de injeção

// alurapic/client/app/painel/painel.components.ts

import { Component, Input, OnInit, ElementRef } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'painel',
    templateUrl: './painel.component.html',
    styleUrls: ['./painel.component.css'],
})
export class PainelComponent implements OnInit {

    @Input() titulo: string;
    private elemento: ElementRef;

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

    ngOnInit() {
        this.titulo = this.titulo.length > 7 ?
             this.titulo.substr(0, 7) + '...' : 
             this.titulo;
    }
}

Um elemento do tipo ElementRef encapsula o elemento do DOM do nosso componente na propriedade nativeElement. Agora, podemos implementar nosso método fadeOut:

// alurapic/client/app/painel/components/painel.ts

import { Component, Input, OnInit, ElementRef } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'painel',
    templateUrl: './painel.component.html',
    styleUrls: ['./painel.component.css'],
})
export class PainelComponent implements OnInit {

    @Input() titulo: string;
    private elemento: ElementRef;

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

    ngOnInit() {
        this.titulo = this.titulo.length > 7 ?
             this.titulo.substr(0, 7) + '...' : 
             this.titulo;
    }

    fadeOut(cb) {   
       // erro de compilação! Não entra o $!
        $(this.elemento.nativeElement).fadeOut(cb);
    }
}
⚠️ **GitHub.com Fallback** ⚠️