Creando una vista de detalle para el proyecto

Crear una vista de detalle clara y útil en Angular es más simple de lo que parece: toma el ID desde la ruta, busca el elemento correcto en tu lista y muestra sus datos con string interpolation. Aquí verás el flujo completo con TypeScript, plantilla HTML y pequeños toques de Bootstrap para una mejor experiencia.

¿Cómo se construye una vista de detalle con Angular y TypeScript?

Para mostrar información específica de un negocio, se parte del ID enviado por la ruta y se trabaja con la lista completa de lugares. Primero, se copia la lista existente desde el componente de lugares y se define un ID inicializado en nulo. En el constructor, se asigna el parámetro de ruta al ID y se crea una función que devuelve el lugar correspondiente. Se valida en consola que el hallazgo sea correcto con console.log.

• Se necesita la lista completa de lugares en detalle.component.ts.
• Se declara una variable id igual a null.
• En el constructor, se asigna el parámetro de ruta al id.
• Se crea buscarLugar para hallar el negocio correcto.
• Se imprime el resultado con console.log.

Ejemplo de la función en TypeScript:

buscarLugar() {
  return this.lugares
    .filter((lugar) => lugar.id == this.id)[0] || null;
}

Además, el resultado se guarda en una variable de instancia para poder usarla en la plantilla:

lugar: any = {};
this.lugar = this.buscarLugar();

¿Qué hace filter y cómo obtener un único lugar?

La función filter itera la lista (estilo foreach) y aplica una condición. Aquí, compara el id del lugar con el id de la ruta. Como filter siempre devuelve un arreglo, aunque coincida un solo elemento, se toma el primer elemento con [0] y, si no hay coincidencias, se retorna null con el operador lógico.

• Iteración con filter sobre this.lugares.
• Función anónima con arrow function para la condición.
• Resultado como arreglo: se usa [0] para el primer elemento.
• Fallback con || null cuando no hay coincidencias.

¿Cómo usar string interpolation para mostrar datos?

Con los datos en this.lugar, la plantilla HTML se actualiza usando llaves dobles. Se muestra el nombre, la distancia, una descripción y el plan. Se añade estructura con un contenedor y un divisor.

<div class="container">
  <div class="well">
    <a routerLink="/lugares">Lugares</a> / {{ lugar.nombre }}
  </div>

  <h2>{{ lugar.nombre }}</h2>
  <hr>
  <small>{{ lugar.distancia }}</small>
  <br>
  <p>{{ lugar.description }}</p>
  <div class="well">
    <strong>Plan: </strong>{{ lugar.plan }}
  </div>
</div>

Claves del marcado: - Contenedor visual con class "container". - Título con {{ lugar.nombre }}. - Distancia en small con {{ lugar.distancia }}. - Descripción en p con {{ lugar.description }}. - Plan en negritas dentro de un "well".

¿Cómo mejorar la interfaz con Bootstrap y un breadcrumb?

Para dar más contexto y navegación, se agrega un breadcrumb simple al inicio con un router link a la lista de lugares. Además, se encapsulan la descripción y el plan dentro de un bloque con la clase "well" de Bootstrap para crear separación visual. Aunque la página aún se ve sencilla, la estructura queda lista para futuros elementos, como un mapa de Google con un marcador del lugar.

• Breadcrumb superior: enlace a /lugares y texto del lugar actual.
• Separación visual usando un div con class "well".
• Estructura limpia y lista para crecer.

Ejemplo del breadcrumb y el bloque informativo:

<div class="well">
  <a routerLink="/lugares">Lugares</a> / {{ lugar.nombre }}
</div>
<div class="well">
  <strong>Plan: </strong>{{ lugar.plan }}
  <p>{{ lugar.description }}</p>
</div>

¿Qué habilidades y conceptos refuerzas en este ejercicio?

A lo largo del proceso se consolidan varias prácticas esenciales para proyectos con Angular y TypeScript: lectura de parámetros, filtrado funcional de datos y presentación con string interpolation. También se introducen patrones de UI simples pero efectivos, como el breadcrumb.

• Lectura de parámetros de ruta en el constructor y asignación a id.
• Uso de filter con función anónima y arrow function.
• Manejo de resultados: arreglo, [0] y || null.
• Variable de estado: lugar: any = {} para el detalle.
• Presentación con string interpolation en la plantilla.
• Mejora visual con Bootstrap y clase "well".
• Navegación contextual con router link y breadcrumb.

¿Te gustaría ver validaciones cuando no exista el lugar o integrar el mapa más adelante? Cuéntame qué te gustaría profundizar y en qué parte necesitas apoyo.