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/popper.js@1.16.0/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

Answer 1

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