How to add a external javascript library file to a specific component in Angular version 7

Question

I'm a newbie with Angular framework. While I trying to create a HTML template using Angular version 7. I fall in to a problem about javascript library. My template has a lot a page such as home, about, product, etc... At a home page, I need to display a slide using jquery.slidey.js library. I'm using script tag to add the library into home.component.html but the library is not loaded. So the question is How can add a external javascript into a specific Angular component. Thanks in advance

You can see all my source at My GitHub source code

score 0 · Answer 1 · answered Feb 20 '19 at 01:55

0

See this. The link shows how to install, setup, and import JQuery library into an Angular project with details and images you can easily follow. There is also a working demo in at the bottom.

answered Feb 20 '19 at 01:55

holydragon

6,158
6
39
62

score 0 · Answer 2 · answered Feb 20 '19 at 06:10

This is how I resolved it.

Index.html

<head>
 ...
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

HomeComponent.ts

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


export class HomeComponent implements OnInit {

  constructor(private appService: AppService) { }

  ngOnInit() {
  }

  doSomething() {
    $("p").hide(); //example
  }

}

score 0 · Answer 3 · answered Feb 20 '19 at 06:17

First, install this package npm install jquery-slider

Now, open angular.json file & add below styles & scripts.

"styles": [ "./node_modules/jquery-slider/..CSS File Path", ], "scripts": [ "./node_modules/jquery-slider/...JS File Path" ]

How to add a external javascript library file to a specific component in Angular version 7

3 Answers3