tengo creados dentro de un proyecto de angular 7 un componente para un sidebar que tiene su vista para pc y otra para una tablet, para ello tambien estoy ocupando bootstrap. Mi codigo dentro del archivo side-bar.component.html en teoria incluye un script que permite que cuando el dispositivo sea una tablet se muestre y se oculte el menu, sin embargo al realizar las pruebas esto no funciona, ya que no se despliega nada. Mi codigo es el siguiente:
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<a href="#">
<i class="fas fa-home"></i>
Inicio
</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-city"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Hermosillo</a>
</li>
<li>
<a href="#">Manzanillo</a>
</li>
<li>
<a href="#">San Luis Potosí</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-plus-circle"></i>
Nuevo Viaje
</a>
</li>
<li>
<a href="#">
<i class="fas fa-search"></i>
Busqueda Avanzada
</a>
</li>
<li>
<a href="#">
<i class="fas fa-list-alt"></i>
Lista de Viajes
</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-arrow-left"></i>
</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</div>
¿Como podría hacer que se ejecute el script o cual seria la forma correcta de hacerlo?