Angular how to add jquery in HTML

Question

I am trying to implement Jquery inside my code. First I added it to my index.html, it works when we arrive on the page, but it is not work with the router link :

<script>

    $(document).ready(function(){
                $('.customer-logos').slick({
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    arrows: false,
                    dots: false,
                    pauseOnHover: false,
                    responsive: [{
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3
                        }
                    }, {
                        breakpoint: 520,
                        settings: {
                            slidesToShow: 3
                        }
                    }]
                });
    });
    </script>

If I want that it works, I need to use href. But I do not want. So I tried to add the script inside the html component :

<div class="background-color-white">
    <section class="customer-logos slider slider-override">
        <div class="slide box">
            <img
                src="http://fr.web.img3.acsta.net/r_1280_720/pictures/16/12/05/14/10/494493.jpg"
            />
            <button class="btn-format">4k</button>
            <button class="btn-duree">120m</button>
            <div class="box-content">
                <h3 class="title">MoonLight</h3>
                <span class="post">18 nov 2018</span>
                <ul class="icon">
                    <li>
                        <a href="#"><i class="fa fa-search"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-play"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
<script>
        $(document).ready(function(){
                    $('.customer-logos').slick({
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 5000,
                        arrows: false,
                        dots: false,
                        pauseOnHover: false,
                        responsive: [{
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 3
                            }
                        }, {
                            breakpoint: 520,
                            settings: {
                                slidesToShow: 3
                            }
                        }]
                    });
        });
        </script>

But it not work

Answer 1

Scripts tags in template html wont work. They can only be added in index.html. They are removed by angular if they are in the template html. For your jQuery code to work, you can add it in the ngOnInit lifecycle hook of the ts file of the component in which you are trying to use it. Also, you must declare the $ variable in to component so that tslint allows you to use it in the component. See the example below:

import { Component, OnInit } from '@angular/core';
declare var $;//jquery var declaration
@Component({
  selector: 'test-page',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestPageComponent implements OnInit {
  ngOnInit() {
    $(document).ready(function () {
      $('.customer-logos').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
          breakpoint: 768,
          settings: {
            slidesToShow: 3
          }
        }, {
          breakpoint: 520,
          settings: {
            slidesToShow: 3
          }
        }]
      });
    });
  }
}

But still, it is always a good idea to avoid using jQuery in your angular application.