Página de contacto Angular desde cero

Crear una página de contacto en Angular es directo si reutilizas código, configuras bien el routing y aplicas clases de Bootstrap para un formulario claro. Aquí verás cómo duplicar un componente, ajustar el selector y el template, registrar la ruta contacto, actualizar el menú con routerLink y construir un formulario con campos de nombre, correo y mensaje.

¿Cómo crear la página de contacto en Angular paso a paso?

Duplicar el componente de detalle acelera el avance. Cambia nombres, limpia el TypeScript y apunta el template correcto para mantener la app ordenada.

• Duplica el componente de detalle y renombra el folder a contacto.
• Renombra archivos: contacto.component.ts y contacto.component.html.
• En el TS, cambia nombre del componente y del selector a app-contacto. Usa el template contacto.component.html.
• Elimina imports que ya no se usan para evitar carga innecesaria.
• Mantén el breadcrumb y cambia el texto a “Contacto” para ubicar al usuario.

¿Qué cambios hacer en el componente?

import { Component } from '@angular/core';

@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html'
})
export class ContactoComponent {}

¿Cómo actualizar el breadcrumb?

<nav>
  <a routerLink="/lugares">Lugares</a> / <span>Contacto</span>
</nav>

¿Cómo configurar rutas y menú con routing en Angular?

Para que la página sea accesible, define la ruta contacto en app.module.ts y agrega el componente a declarations. Luego, crea un ítem en el menú que apunte a la nueva ruta y elimina el enlace redundante a detalle (ya se navega desde la lista de lugares).

• En app.module.ts, agrega path "contacto" y component ContactoComponent.
• Importa ContactoComponent y súmalo a declarations.
• En app.component.html, agrega un enlace de menú con routerLink a "/contacto".
• Elimina el enlace “Detalle” si ya no es necesario.

// Ejemplo de rutas
const routes = [
  { path: 'lugares', component: LugaresComponent },
  { path: 'contacto', component: ContactoComponent }
];

<!-- Menú -->
<nav>
  <a routerLink="/lugares">Lugares</a>
  <a routerLink="/contacto">Contacto</a>
</nav>

¿Cómo construir el formulario con Bootstrap y buenas prácticas?

La idea es ofrecer un formulario simple y usable: nombre, correo y mensaje. Usa la clase de Bootstrap form-control para estilizar campos y botones con btn. El input type="email" mejora la experiencia móvil al mostrar la arroba y el .com en el teclado.

• Campo “Nombre”: label + input type="text" con form-control.
• Campo “Correo”: label + input type="email" con form-control.
• Campo “Mensaje”: textarea con form-control.
• Separador visual con <hr>.
• Botón “Enviar” con estilo primario.
• Botón “Cancelar” con routerLink a “/lugares”.

<!-- Formulario de contacto -->
<div class="form-group">
  <label>Nombre</label>
  <input type="text" class="form-control">
</div>

<div class="form-group">
  <label>Correo</label>
  <input type="email" class="form-control">
</div>

<div class="form-group">
  <label>Mensaje</label>
  <textarea class="form-control"></textarea>
</div>

<hr>

<a class="btn btn-primary">Enviar</a>
<a class="btn btn-default" routerLink="/lugares">Cancelar</a>

Además, se sugiere enriquecer la vista: agregar un mapa de Google, una imagen, o dividir el layout en ocho columnas para el formulario y cuatro para una descripción con dirección, teléfono, correo e íconos de Bootstrap. Esto mejora claridad y confianza del usuario.

Finalmente, se anticipa un tema clave: servicios. Si observas, la lista de lugares se repite en detalle.component.ts y lugares.component.ts. Con servicios podrás hacer un refactor para centralizar datos en un solo lugar y evitar duplicación, siguiendo el principio DRY.

¿Tienes mejoras para tu página de contacto? Comparte tu resultado y el código con la comunidad. ¡Nos encantará ver tu implementación!