CODEWITHSUNDEEP
angular
Anjana
Anjana

Reputation: 426

I'm trying to include js code in component.ts file. I'm getting error while doing that

This is my component.ts file:

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

declare const scrollLeft: any;
declare const reset: any;

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

  constructor() { }

   ngOnInit() {
    // http://www.multislider.info/

    $(document).ready(function() {
      $("#myCarousel").on("slide.bs.carousel", function(e) {
        var $e = $(e.relatedTarget);
        var idx = $e.index();
        var itemsPerSlide = 4;
        var totalItems = $(".carousel-item").length;

        if (idx >= totalItems - (itemsPerSlide - 1)) {
          var it = itemsPerSlide - (totalItems - idx);
          for (var i = 0; i < it; i++) {
            // append slides to end
            if (e.direction == "left") {
              $(".carousel-item")
                .eq(i)
                .appendTo(".carousel-inner");
            } else {
              $(".carousel-item")
                .eq(0)
                .appendTo($(this).find(".carousel-inner"));
            }
          }
        }
      });
    });



  }
  // public loadScript(url: string) {
  //   const body = <HTMLDivElement> document.body;
  //   const script = document.createElement('script');
  //   script.innerHTML = '';
  //   script.src = url;
  //   script.async = false;
  //   script.defer = true;
  //   body.appendChild(script);
  // }

}

I'm getting the errors below:

Property 'relatedTarget' does not exist on type 'TriggeredEvent'. Did you mean 'delegateTarget'?

Property 'direction' does not exist on type 'TriggeredEvent'**

Please help me fix them.

Upvotes: 1

Views: 107

Answers (1)

Charly Sosa
Charly Sosa

Reputation: 575

If you are using Angular I recommend you that use Ngx bootstrap or Ng bootstrap. Both have a angular carousel component.

Nevertheless if you are using jquery, you must install it.

npm i jquery

In your angular.json file add

...
"build": {
    ...
    "options": {
        ...
        "scripts": [
            "node_modules/jquery/dist/jquery.min.js"
        ],
        ...
    },
    ...
 },
 ...

In your component

import * as $ from 'jquery';

Regards

Upvotes: 1

Related Questions