CODEWITHSUNDEEP
javascriptjqueryhtmlangular
AMAN
AMAN

Reputation: 51

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

`

<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

Upvotes: 1

Views: 742

Answers (3)

Raghul Selvam
Raghul Selvam

Reputation: 315

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

Upvotes: 0

Web Nexus
Web Nexus

Reputation: 1158

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": []

Upvotes: 1

Justin D
Justin D

Reputation: 697

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

Upvotes: 0

Related Questions