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
– PankajH, Commented Jun 8, 2019 at 16:38
You should usually, import scripts via your angular.json file. — PankajH
– PankajH, Commented Jun 8, 2019 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
– PankajH, Commented Jun 8, 2019 at 16:41
But i want to use those files for a particular component.Not for all — AMAN
– AMAN, Commented Jun 8, 2019 at 16:43

Web Nexus · Accepted Answer · 2019-06-08 16:39:50Z

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 8, 2019 at 16:39

Web Nexus

1,14811 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AMAN Over a year ago

but i want to use it only for a particular component

Justin D · Accepted Answer · 2019-06-08 16:38:58Z

0

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

answered Jun 8, 2019 at 16:38

Justin D

7071 gold badge9 silver badges18 bronze badges

Comments

Raghul Selvam · Accepted Answer · 2019-06-08 18:36:02Z

0

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');
    }
}

answered Jun 8, 2019 at 18:36

Raghul Selvam

3152 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related