CODEWITHSUNDEEP
javascripthtmlangularvisual-studio-code
Fraction
Fraction

Reputation: 3

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

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.

Upvotes: 0

Views: 1599

Answers (2)

Stundji
Stundji

Reputation: 864

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

Upvotes: 1

Rahul
Rahul

Reputation: 2128

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 !!

Upvotes: 0

Related Questions