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);
      });
    });
  }
}

Author : m4rlb0r0

Aktualnie siedzę we frontendzie. Na co dzień koduję HTML5, CSS3 (SASS) i JavaScript na potrzeby PrestaShop. Gdy zajdzie potrzeba nurkuję w backend do PHP i MySQL gdzie zaczynałem swoją przygodę z zaawansowaną developerką. Ciągły rozwój :)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Profesjonalny Hosting