4

He iniciado una app con angular-cli y he instalado bootstrap 4. Al insertar un navbar en app.component.html aparentemente todo estaba correcto pero al minimizar a tamaño mobile aparece el botón de hamburguesa pero no se despliega el menú.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

4
  • 3
    Te faltan la parte .js de boostrap, la cual actúa en estos tipos de comportamientos. Puedes añadirla o pasar a ng-boostrap, que esta echo especialmente para angular Commented el 31 jul. 2018 a las 12:17
  • 1
    @FedericoMadoery Si estás trabajando con Angular es mala idea meter los Javascript de Bootstrap. Commented el 31 jul. 2018 a las 13:01
  • @PabloLozano totalmente es una mala idea, concuerdo. La diferencia de ng-boostrap es que no depende de librerías Javascript de terceros, usa componentes y con npm lo podes en marcha rápidamente. Commented el 31 jul. 2018 a las 13:04
  • antes de todo gracias por vuestras respuestas, efectivamente no me gusta trastear con los javascript de bootstrap, el caso es que también tengo instalado ng-bootstrap, de ahí viene mi duda. Que no entiendo pq no se comporta como debería. Commented el 1 ago. 2018 a las 17:20

2 respuestas 2

1

Bootstrap es una librería que añade por un lado estilos y (opcionalmente) por otro comportamiento. El problema es que el comportamiento lo añade usando jQuery y no funciona bien cuando lo mezclas con frameworks como Angular, AngularJS, React... etc porque los componentes tienen su propio ciclo de vida y aparecen y desaparecen sin que jQuery se entere.

Por tanto la solución más directa es crear un componente TopNav y añadirle el comportamiento deseado, algo como:

export class TopNavComponent {
  show:boolean = false;

  // otro código que necesites

  toggleCollapse() {
    this.show = !this.show
  }
}

con una plantilla (template) parecida a:

<button (click)="toggleCollapse()" class="navbar-toggler navbar-toggler-right" type="button">
<!-- otras cosas  -->

 <div class="collapse" [class.show]="show">
   <!-- elementos del menú/barra  -->
 </div>

Esto no es más que un boceto muy simple de la idea, sin tener en cuenta que según el tamaño de la pantalla la presentación varía (en un PC no se vería el botón y la variable show debería valer true todo el tiempo), pero creo que te puedes hacer a la idea.

0

A pesar de que coincido con los comentarios de los demás usuarios de la comunidad, dado que Typescript tiene ciertos rasgos de incompatibilidad con Javascript (digo esto porque la cuestion radica en que, se debe pasar la logica de un archivo Typescript a Javascript para que de esta forma pueda ser leída o interpretada por los navegadores).

Cuando comence con Angular me topé con el mismo problema, pero lo solucioné de la siguiente manera:

Primero, lo que hice fue descargar las librerías de JavaScript de los diferentes framework de diseño:

  1. Jquery.js
  2. Bootstrap.js

y los puse en la carpeta assets de nuestro proyecto en Angular:

Esquema

Y posteriormente en el archivo raiz o index de la aplicación:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Material</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="assets/js/jquery-3.2.1.slim.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Nota: lo ideal sería instalarlos directamente con las funciones de npm y adjuntarlos en el archivo angular.json

"styles": [
            "src/styles.scss",
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/theme.scss",
          ],
"scripts": [
             "node_modules/jquery/js/dist/jquery.min.js",
             "node_modules/bootstrap/js/dist/bootstrap.min.js"
           ]

, o puedes instalar la librería de ng-bootstrap que es muy buena porque se enfoca precisamente en que sea compatible con Angular sin la necesidad de usar Javascript para ejecutar ciertas funciones. Lo instalas con el siguiente comando:

npm install --save @ng-bootstrap/ng-bootstrap
3
  • En general es mejor evitar el uso de jQuery en una aplicación con Angular: Si la aplicación usa un nav que no existe en la pantalla de login, jQuery/Bootstrap no le añadirá el comportamiento porque no existe cuando el evento "onload" se lanza. O si un elemento desaparece del DOM y luego se genera de nuevo, perderá todo el comportamiento añadido por jQuery/Bootstrap Commented el 31 jul. 2018 a las 13:49
  • Si, es verdad pero aún así la aplicación funciona. Tal vez no sea lo más practico para aplicaciones con Angular pero funciona. Dudo la segunda opción directamente en el angular.json pero incluyendo los archivos en la raíz del proyecto si. Igualmente gracias por tu comentario, es bueno saber más al respecto!
    – jecorrales
    Commented el 31 jul. 2018 a las 14:06
  • Se puede hacer funcionar, pero haciendo que el componente de Angular se encargue de ello: el método ngAfterViewInit() tendría que realizar la acción de asignar listeners, por ejemplo, y ngOnDestroy ()debería eliminarlos para evitar problemas. Es un precio alto a la larga Commented el 31 jul. 2018 a las 14:15

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.