How to import javascript files in a particular component like Html and css?

Question

`

<script src="./jquery.min.js"></script>
  <script src="./bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="./jquery.easing.min.js"></script>

  <!-- Page level plugin JavaScript-->
  <script src="./Chart.min.js"></script>
  <script src="./jquery.dataTables.js"></script>
  <script src="./dataTables.bootstrap4.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="./sb-admin.min.js"></script>

  <!-- Demo scripts for this page-->
  <script src="./datatables-demo.js"></script>
  <script src="./chart-area-demo.js"></script>

This is the some part of code of my index.html file in an angular component.I want to import all the js files as above but couldn't be able to do that.Can anyone please tell that how i can include all the javascripts file?I only just want to include it in Html file of an angular component.I can't do it globally as i have to use it only in a particular Component

Are you trying to use these js files in your typescript code ? — PankajH, Jun 08 '19 at 16:38
You should usually, import scripts via your angular.json file. — PankajH, Jun 08 '19 at 16:40
Another issue might be the path from where you are referencing the js files, Make sure they exist at the location you have specified. "./xyx.js" implies it should be no the same level as the file it was refered in. — PankajH, Jun 08 '19 at 16:41
But i want to use those files for a particular component.Not for all — AMAN, Jun 08 '19 at 16:43
Possible duplicate of [Angular2: import external js file into component](https://stackoverflow.com/questions/37081943/angular2-import-external-js-file-into-component) — codeherk, Jun 08 '19 at 16:45
I have already seen that that solution codeherk .It didn't understand — AMAN, Jun 08 '19 at 16:49
@codeherk In that question he wanted to add functions of a js Files for using it in angular component.But i only want to include js file same as we import Html and css in a component — AMAN, Jun 08 '19 at 16:55

score 1 · Answer 1 · answered Jun 08 '19 at 16:39

1

Scripts and styles should be imported into your angular.json file:-

look for the following line and import your css and js into those:-

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "./node_modules/font-awesome/css/font-awesome.min.css",
    "./node_modules/semantic-ui/dist/semantic.min.css",
    "src/styles.scss"
],
"scripts": []

answered Jun 08 '19 at 16:39

Web Nexus

1,150
9
28

but i want to use it only for a particular component – AMAN Jun 08 '19 at 16:41

score 0 · Answer 2 · answered Jun 08 '19 at 16:38

0

Are those script tags belong only to that component? If no, what about placing these tags in the index.html file?

answered Jun 08 '19 at 16:38

Songokute

687
1
9
17

score 0 · Answer 3 · answered Jun 08 '19 at 18:36

Let me take Jquery for example, Assume Jquery path included in the index.html file like you did above, then in the component where I want to use Jquery, add below priece of code above the @Component decorator, then you can use the Jquery functionality inside that component only.

declare var $;

Example component.ts

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

//declare dollor($) here
declare var $;
@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
    public divElement: any;
    constructor( ) { }

    ngOnInit() {
     this.divElement = $('div');
    }
}

How to import javascript files in a particular component like Html and css?

3 Answers3