Crear una barra de navegación en Angular

1. La barra de navegación en Angular
2. Crear una barra de navegación en Angular

Este tutorial presentará cómo crear una barra de navegación en Angular y usarla para navegar en aplicaciones Angular.

La barra de navegación en Angular

Navbar es una de las partes esenciales de cualquier aplicación web. Incluso cuando creamos una aplicación de una sola página (SPA) que consiste en una sola página pero en diferentes secciones, aún usamos la barra de navegación para navegar de una sección a otra.

Navbar permite a los usuarios encontrar fácilmente lo que buscan en sus aplicaciones web.

Hay muchos métodos de navegación para lograr enrutamiento simple a complejo. Angular proporciona un módulo separado que nos ayuda a crear una barra de navegación en nuestra aplicación web y usarla para navegar.

Podemos usar el método navigate() del enrutador si queremos que el usuario navegue de una página a otra mediante programación, lo que significa que navegamos por los componentes sin usar los enlaces exactos. En su lugar, usamos los nombres de los componentes.

Crear una barra de navegación en Angular

Veamos un ejemplo en el que crearemos una barra de navegación y la usaremos para navegar a través de diferentes componentes usando navigate(). Entonces, hagamos una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación, iremos a nuestro directorio de aplicaciones usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para asegurarnos de que todas las dependencias estén instaladas correctamente.

# angular
ng serve --open

Generar componentes de la barra de navegación en Angular

Ahora, generemos los componentes de la barra de navegación. Primero, generaremos nuestro componente index, que actuará como el componente home de nuestra aplicación.

# angular
ng generate component index

Luego, generaremos el componente about us.

# angular
ng generate component aboutUs

Por último, generaremos nuestro componente products usando el siguiente comando.

# angular
ng generate component products

Tendremos 3 componentes en carpetas separadas con 3 archivos, que puedes ver a continuación.

Producción:

Crear las vistas para los componentes

Ahora, crearemos vistas para nuestros componentes. Primero, abriremos aboutUs.component.html desde la carpeta about y agregaremos el siguiente código.

# angular
<div class="container" >
  <h1> This is about Us Component </h1>
  <h3> This is the content of About Us </h3>
</div>

A continuación, abriremos el archivo index.component.html de la carpeta home y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is index component </h1>
  <h3> This is the content of Index </h3>
</div>

Abriremos el archivo products.component.html de la carpeta services y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is products component </h1>
  <h3> This is the content of Products </h3>
</div>

Definir las rutas de componentes

Una vez que hayamos creado nuestros componentes y vistas, definiremos nuestras rutas en app-routing.module.ts.

Importaremos ngModule. También importaremos Routes y RouterModule desde el enrutador y, por último, pero no menos importante, los componentes que acabamos de crear.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent}  from './aboutUs/aboutUs.component';
import { IndexComponent} from './index/index.component';
import { ProductsComponent } from './products/products.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Después de importar, definiremos las rutas de nuestros componentes, como se muestra a continuación.

# angular
const routes: Routes = [

    { path: 'aboutUs', component: AboutUsComponent },
    { path: 'index', component: IndexComponent},
    { path: 'products', component: ProductsComponent },
 ];

Crear un menú de navegación

Luego haremos nuestro menú de navegación en app.component.html. Cada enlace llamará a una función con el método (click).

Mostraremos los datos de los componentes usando router-outlet como se muestra a continuación.

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToIndex()">Home</a>
  </li>
  <li>
    <a (click)="goToAboutUs()">About Us</a>
  </li>
  <li>
    <a (click)="goToProducts()">Products</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Crear las funciones para navegar entre componentes

A continuación, crearemos nuestras funciones goToIndex(), goToAboutUs() y goToProducts(). Abriremos app.component.ts e importaremos Router.

Usando router.navigate(), crearemos estas funciones para navegar entre componentes.

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private router: Router) {
  }

  goToIndex() {
    this.router.navigate(['/', 'index']);
  }
  goToAboutUs() {
    this.router.navigate(['/', 'aboutUs']);
  }
  goToProducts() {
    this.router.navigate(['/', 'products']);
  }
}

Producción:

Como puede ver en el ejemplo, podemos crear fácilmente una barra de navegación en nuestras aplicaciones Angular y usarla para navegar entre componentes usando navigate() y definiendo rutas.

Puede acceder al código completo utilizado en este tutorial.