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.
