A
A
Alexander Belov2017-01-30 00:08:57
JavaScript
Alexander Belov, 2017-01-30 00:08:57

How to use jQuery in Angular2 / Webpack?

How to include and painlessly use JQuery in Angular2 / Webpack bundle?

I'm trying to do this:

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit {
  public products: any;

  constructor(){ }  
      
        interface JQuery extends CatalogComponent {
           public  carousel(): any; 
       }

  ngOnInit(){
    this.products = 
    [
        {
          "id":"id-1,
          "title": "Product 1",
          "description": "Product One Description",
          "price": 68720,
          "quantity": " "
        },
                     
                      {
          "id":"id-2,
          "title": "Product 2",
          "description": "Product Two Description",
          "price": 68720,
          "quantity": " "
        },

                    {
          "id":"id-3,
          "title": "Product 3",
          "description": "Product Three Description",
          "price": 68720,
          "quantity": " "
        },
    ];

                	//Carousel
    $('.multi-item-carousel').carousel({
      interval: false
    });

    
    $('.multi-item-carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
      next = $(this).siblings(':first');
    }
    
      next.children(':first-child').clone().appendTo($(this));
        
      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });

    
  }

}


The console responds like this:
9340db770ec44e8ab47f80e13353efcc.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry Kalyuk, 2017-01-30
@kalyukdo

Why are you doing it??? no need to do it! if you take a framework like angular, there is no need to interfere with libraries like JQ, this is pointless and not true, since everything is already there in angular, + manipulation with the house is prohibited!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question