Permitir que los usuarios modifiquen información ya creada es una pieza fundamental en cualquier aplicación. En este caso, se aborda cómo implementar la edición de rodadas dentro de una app construida con Angular e Ionic, conectando el frontend con un backend mediante peticiones HTTP y aprovechando el sistema de rutas para pasar el identificador de cada registro.

¿Cómo agregar un botón de edición en cada tarjeta?

El punto de partida es el archivo rides.page.html, donde ya se listan las rodadas en tarjetas (cards). Dentro del componente ion-card-content se agrega un nuevo ion-item con un routerLink dinámico [01:00]:

html <ion-item [routerLink]="'/ride-form/' + ride.id"> <ion-icon name="create" slot="start"></ion-icon> <ion-label>Editar</ion-label> </ion-item>

• El routerLink apunta a /ride-form/ seguido del ID de la rodada.
• La diagonal inicial es crucial: indica que la ruta parte desde la raíz de la URL y evita que se concatene con la ruta actual, lo que provocaría un error.
• El icono create da al usuario una referencia visual clara de que puede editar.

Además, se complementa el botón superior de crear (el signo de más) asignándole la ruta /ride-form/new [02:22], que quedó pendiente en la clase anterior.

¿Qué métodos se necesitan en el servicio para editar?

Dentro de ride.service.ts se crean dos métodos nuevos [03:15]:

¿Cómo funciona el método update?

Se parte del método create ya existente y se modifica:

• Se cambia http.post por http.put, que es el verbo HTTP estándar para actualizaciones.
• Se concatena el ID de la rodada a la URL usando template literals (comillas invertidas o backticks) [03:50]:

typescript update(ride: Ride): Observable<Ride> { return this.http.put<Ride>(${this.url}/${ride.id}, ride); }

Los template literals permiten insertar variables con la sintaxis ${variable}, lo que resulta más limpio que concatenar con el operador +.

¿Cómo funciona el método getById?

Se parte del método getAll y se adapta [04:35]:

typescript getById(id: string): Observable<Ride> { return this.http.get<Ride>(${this.url}/${id}); }

• Retorna un Observable<Ride> (sin array, porque es un solo registro).
• El tipo Observable es propio de la programación reactiva en Angular: representa un flujo de datos asíncrono que se resuelve cuando el backend responde.

¿Cómo se carga y actualiza la información en el formulario?

En ride-form.page.ts, dentro del método ngOnInit, se verifica si el usuario está editando [05:10]. Si es así, se llama a getById y se suscribe al observable:

typescript if (this.editing) { this.rideService.getById(this.id).subscribe({ next: (data: Ride) => { console.log(data); this.ride = data; }, error: () => { alert('No se pudo obtener el ride'); } }); }

• El método subscribe parsea el observable: espera a que lleguen los datos y los entrega como un objeto Ride simple.
• Al asignar this.ride = data, los campos del formulario se llenan automáticamente gracias al data binding de Angular.

Para el guardado, dentro del método save se agrega la lógica de actualización [07:30]:

typescript this.rideService.update(this.ride).subscribe({ next: () => alert('Se actualizó tu rodada'), error: () => alert('No se pudo actualizar la rodada') });

¿Cómo mejorar la apariencia de la pantalla de edición?

Se aplican dos ajustes visuales rápidos en ride-form.page.html [08:45]:

• Se agrega un ion-back-button dentro de ion-buttons con slot="start" en el toolbar, para que el usuario pueda regresar si no desea editar.
• Se asigna color="dark" tanto al toolbar como al ion-content, manteniendo coherencia con el diseño general de la app.

html <ion-buttons slot="start"> <ion-back-button></ion-back-button> </ion-buttons>

Con estos cambios, la funcionalidad de edición queda completa: el usuario selecciona una rodada, los campos se llenan automáticamente, puede modificar lo que necesite y guardar los cambios sin tener que reescribir toda la información. ¿Has implementado flujos de edición similares en tus proyectos? Comparte tu experiencia.