code within the tag <script> is not working in the component.html file in VScode,angular

Question

my question is, even though i have included the tag

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

in index.html

In the component.html, code within the tag is not being executed.

No errors, when inspected.

PS: I have used the following for the toast message box

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Edit:

code:

<!DOCTYPE html>

    <html>

    <head>
        <title>Collapse/Expand</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
        <style>
         #container{
            margin:0 auto;
            width:80%;
            overflow:auto;
        }
        table.gridtable {
                    margin:0 auto;
                    width:95%;
                    overflow:auto;
                    font-family: helvetica,arial,sans-serif;
                    font-size:14px;
                    color:#333333;
                    border-width: 1px;
                    border-color: #666666;
                    border-collapse: collapse;
                    text-align: center;
            }
            table.gridtable th {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    border-color: #666666;
                    background-color: #F6B4A5;
            }
            table.gridtable td {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    border-color: #666666;
            }
        </style>
    </head>

    <body>
        <div class="container" id="container">
            <table class="gridtable" id="tableMain">
                <thead>
                    <tr class="tableheader">
                      <th>customer</th>
                      <th>product</th>
                      <th>thedate</th>
                      <th>value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 06</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 07</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 08</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 09</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 01</td><td>product 10</td><td>04 12 2017</td><td>634.50</td></tr>

                    <tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
                    <tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 02</td><td>product 03</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 02</td><td>product 04</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 02</td><td>product 05</td><td>04 12 2017</td><td>634.50</td></tr>

                    <tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 06</td><td>04 12 2017</td><td>634.50</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 07</td><td>30 10 2017</td><td>974.57</td></tr>
                    <tr class="datarow"><td>customer 03</td><td>product 08</td><td>04 12 2017</td><td>634.50</td></tr>

                </tbody>
            </table>
        </div>

        <button id = "button1" type="button">Load</button>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

        <script >
            $( document ).ready(function() {

                $('#button1').click(function () {
                    $("#tableMain").append('<tr class="breakrow"><td>customer 04</td><td></td><td></td><td></td></tr>');
                    $("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>');
                    $("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>');
                    $("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>');
                    $("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>');
                    $("#tableMain").append('<tr class="datarow"><td>customer 04</td><td>product 05</td><td>30 10 2017</td><td>974.57</td></tr>');
                });


                //collapse and expand sections

                //$('.breakrow').click(function(){
                $('#tableMain').on('click', 'tr.breakrow',function(){
                    $(this).nextUntil('tr.breakrow').slideToggle(200);
                });
            });
        </script>

    </body>
    </html>

When this html file is run individually as 'file:///D:/Angular/node-v8.11.4-win-x64/node-v8.11.4-win-x64/foldername%20(1)/folder1/projectname/src/app/collapse-test/collapse-test.component.html', it works as expected.

But when executed through project flow.It is not working as expected.

Possible duplicate of Need to insert Script tag in angular 2 — user184994
– user184994, Commented Nov 7, 2018 at 7:26

Stundji · Accepted Answer · 2018-11-07 07:21:57Z

1

You cannot add script tag like that in an Angular component. If you want to install jQuery do it like that:

First install jQuery using npm as follows

npm install jquery — save

Second go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

After including jQuery stop running your Angular CLI application and then re run it using ng serve.

Now to use jQuery, all you have to do is to import it as follows in whatever component you want to use jQuery.

import * from 'jquery';

If you absolutely want to insert an inline script tag, refer to the asnwer here: https://stackoverflow.com/a/38090157/8664336

answered Nov 7, 2018 at 7:21

Stundji

8487 silver badges17 bronze badges

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

1 Comment

Fraction Over a year ago

packages have been installed; yet the code within <script> is not working.

Rahul · Accepted Answer · 2018-11-07 07:20:58Z

0

It's not a right way to access your script in you component.html you can add all your external script references in your index.html

If you want to access internally other than cdn install the specific library npm install [packageName]@latest this comment line will add the package and you can refer it in angular.json file on scripts array or styles array

Hope this help you - Thanks Happy coding !!

answered Nov 7, 2018 at 7:20

Rahul

2,1382 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

code within the tag <script> is not working in the component.html file in VScode,angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related