2

Desde la página de boootstrap copie y pegue en mi aplicación de Angular el siguiente código para tener la navbar:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Admin</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="/admin-principal">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" routerLink="/clientes">Clientes</a>
        <a class="nav-item nav-link" href="#">Ventas</a>
        <a class="nav-item nav-link" href="#">Administradores</a>
      </div>
    </div>
</nav>

Sin embargo cuando pulso el botón navbar-toogler para desplegar las opciones del menu, no despliega nada, esta como inactivo.

1
  • 2
    Porque esa característica depende del uso de JQuery, no basta con los estilos. En todo caso, existe la versión de Bootstrap específica para Angular llamada ng-bootstrap que tal vez sea más adecuada para no depender de JQuery. Saludos Commented el 9 oct. 2020 a las 13:54

1 respuesta 1

2

Bootstrap a secas está diseñado para usarse con sus propios ficheros JS que añaden el comportamiento que esperas. No has añadido el código Javascript, con lo que tienes la vista, pero no el comportamiento:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Admin</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="/admin-principal">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" routerLink="/clientes">Clientes</a>
        <a class="nav-item nav-link" href="#">Ventas</a>
        <a class="nav-item nav-link" href="#">Administradores</a>
      </div>
    </div>
</nav>

Lamentablemente este código JS usa jQuery, con lo que no se lleva nada bien con Angular. Por tanto, te recomiendo no añadir estos ficheros de Javascript a tu código Angular, sino que uses ng-bootstrap, que te añade los componentes de Bootstrap como componentes pregenerados para Angular, que puedes configurar fácilmente:

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.