0

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?

2
  • Estas mezclando jquery con angular? Commented el 3 jun. 2019 a las 21:30
  • asi es @MiguelZarate Commented el 10 jun. 2019 a las 1:11

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.