Implementacja jQuery w komponencie Angular

Możesz dołączyć jQuery do swojego projektu w kilku łatwych krokach. W pierwszej kolejności zainstaluj jQuery za pomocą menadżera pakietów npm w następujący sposób:

npm install jquery --save

Po drugie, przejdź do pliku ./angular.json w katalogu głównym folderu projektu Angular CLI i znajdź właściwość scripts: [] i dołącz ścieżkę do jQuery w następujący sposób:

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

Uwaga: Jeśli chcesz użyć bootstrap w aplikacji lub jeśli masz już w swoim projekcie, pamiętaj o dołączeniu jQuery przed dołączeniem pliku JavaScript bootstrap. Plik JavaScript Bootstrap wymaga jQuery.

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

Po dołączeniu jQuery pamiętaj o wyłączeniu aplikacji jeżeli masz uruchomioną w Angular CLI. Następnie uruchom ją ponownie, używając ng serve. Teraz, aby użyć jQuery w obrębie komponentu, wystarczy go zaimportować:

import * as $ from 'jquery'; 

Poniżej przykładowy komponent uzywający jQuery:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-back-to-top',
  templateUrl: './back-to-top.component.html',
  styleUrls: ['./back-to-top.component.scss']
})
export class BackToTopComponent implements OnInit {

  constructor() { }

  public ngOnInit() {

    // JavaScript section
    window.addEventListener('load', () => { LogoFix(); });
    window.addEventListener('scroll', event => { LogoFix(); });

    const m4Top = document.getElementById('m4-back-to-top');

    function LogoFix() {
      if (window.scrollY > 300) {
        m4Top.style.bottom = '20px';
      } else {
        m4Top.style.bottom = '-200px';
      }
    }

    // jQuery section
    $( () => { 
      $('#m4-back-to-top').on('click', () => {
        $('html, body').animate({scrollTop: $('mat-toolbar').offset().top}, 1000);
      });
    });
  }
}