Crear un nuevo componente para NavBar
En index.html escribir dentro del body los script necesarios para que se muestre el dropdown del NavBar :
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title>PrimoProgetto</title>
<!--path de base-->
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<!-- jQuery (necesario para los complementos de JavaScript de Bootstrap) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<!-- Incluya todos los complementos compilados (a continuación)
o incluya archivos individuales según sea necesario -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
Lo siguiente es ir a Bootstrap y seleccionar un NavBar:
Copiar y Pegar el código dentro del componente navbar.html para luego crear los enlaces
En el navbar.html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand y toggle se agrupan para una mejor visualización móvil -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b>Nombre Proyecto</b></a>
</div>
<!-- Recopile los enlaces de navegación, formularios y otro contenido para alternar -->
<!-- Recopile los enlaces de navegación, formularios y otro contenido para alternar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--botón de ejemplo-->
<li><a href="/enlace-de-la- ruta">Boton 1 <span class="sr-only">(current)</span></a> </li>
<!--menu desplegable 1-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria- expanded="false"> Items <span class="caret"></span></a>
<ul class="dropdown-menu">
<!--llamar la ruta con routerLink-->
<li><a [routerLink]="'/enlace-de-la- ruta'">Iten 1</a></li>
<li><a [routerLink]="'/enlace-de-la- ruta'">Iten 1</a></li>
<!--llamar la ruta con href-->
<li><a href="/enlace-de-la- ruta">Iten 2</a></li>
<li role="separator" class="divider"></li>
<li><a href="/enlace-de-la- ruta">Iten 3</a></li>
</ul>
</li>
<li><a href="/enlace-de-la- ruta">Iten 2</a></li>
<li role="separator" class="divider"></li>
<li><a href="/enlace-de-la- ruta">Iten 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
En el app.component.html:
<app-navbar-biblioteca></app-navbar-biblioteca><router-outlet></router-outlet>
No hay comentarios:
Publicar un comentario