CODEWITHSUNDEEP
javascriptjqueryangular
Break
Break

Reputation: 51

Import external .js / .css into angular4 app

Im trying to use owl.carousel onto my angular app, here's a fiddle of what's the objective.

https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

The steps i took were:

On angular-cli.json i've added on scripts the path for those .js files

"scripts": [
            "../node_modules/owlCarousel/dist/owl.carousel.js",
            "../node_modules/owlCarousel/dist/owl.carousel.min.js",
....

i what to use the carousel on my menu compontent, the problem is that when i call the funtion on ngInit() menu.compontent.ts:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

it gives an error on owlCarousel(), saying that "owlCarousel does not exist on type 'jQuery'.

am i supose to export something on index.ts that i use to export all compontentes of shared folder? Or i need to import something on menu.component.ts, if so, what?

heres my menu.compontent.ts:

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


@Component({
 selector: 'app-menu',
 templateUrl: './menu.component.html',
 styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

 constructor() {
 }
 ngOnInit() {

  $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
  });

  $('#myDropdown').on('hide.bs.dropdown', function () {
      return false;
  });
}

closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
}

Upvotes: 0

Views: 382

Answers (2)

andrea06590
andrea06590

Reputation: 1299

The thing is that people starting with Angular projects, don't get that jQuery will cause you problems if not well integrated. That's why people create npm packages integrating those jQuery solution. https://www.npmjs.com/package/angular2-carousel

Upvotes: 0

72GM
72GM

Reputation: 3114

Firstly don't load both .js/min.js & .css/min.js as you are loading 2 versions of same thing.

Secondly you are not writing typescript and you are polluting your angular with jquery unnecessarily. There is no point using angular in this way. Interacting with the DOM in this way is not recommended

Use a library that is written specifically for angular and follows angular best practices eg. Ng Bootstrap or NGX bootstrap. Otherwise just use html and jquery and your owl library.

https://ng-bootstrap.github.io/#/components/carousel/examples

https://valor-software.com/ngx-bootstrap/#/carousel

Upvotes: 1

Related Questions