Angular 9 does not recognise HTML <script> tags

Question

My dashboard.component.html


     <button type="button" id="sidebarCollapse" class="btn btn-info">Collapse</button>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function(){
                $('#sidebarCollapse').on('click',function(){
                    $('#sidebar').toggleClass('active');
                });
            });
        </script>

This compiles perfectly along with other code inside the dashboard.component.html file, but after ng serve. My application does not execute the Collapse button when clicked.

If I run the file separately as index.html with its style.css outside Angular Framework, it tends to work fine. The issue exists with bootstrap libraries not being executed by Angular or something related.

I have rest of the full functional code in stackblitz for reference https://stackblitz.com/edit/dashboardissue

First, If you want to load external scripts, it should be in index.html. Second for using jquery, please refer this: stackoverflow.com/questions/30623825/… — Krishna Mohan
just copying the script tags to index.html got the job done! Thanks alot — Shubham

mat.hudak mat.hudak · Accepted Answer · 2020-05-20T11:57:45

Please don't do it that way. You can easily toggle Sidebar with just Angular and you don't have to mix jQuery in it.

app.component.html

<button type="button" id="sidebarCollapse"(click)="toggleSidebar()" class="btn btn-info">Collapse</button>

app.component.ts

export class AppComponent  {
  name = 'Angular';
  collapsed: boolean = false;

  toggleSidebar(): void {
    this.collapsed = !this.collapsed;
  }
}

Updated your version: https://stackblitz.com/edit/dashboardissue-zxiuvt

Angular 9 does not recognise HTML <script> tags

2 Answers