Crear Rodada: recibiendo parámetros desde la URL

¿Cómo crear botones en una interfaz de usuario para manejar datos?

Si buscas mejorar la experiencia del usuario permitiéndole gestionar datos con eficacia, el uso de botones interactivos es esencial. Toda aplicación moderna debería facilitar la interacción directa para actualizar y crear datos sin depender de herramientas como Postman. Aquí cubriremos cómo implementar botones en una aplicación utilizando IONIC y Typescript.

¿Qué botones necesitamos?

Para manejar nuestras ruedas de datos, crearemos dos botones cruciales:

1. Botón para refrescar los datos: Este botón permitirá al usuario actualizar la lista de ruedas, reflejando cambios recientes.
2. Botón para crear nueva rueda: Al hacer clic, el usuario será dirigido a una pantalla para ingresar detalles de una nueva rueda.

¿Cómo agregar los botones en IONIC?

Primero, vamos a añadir las etiquetas necesarias en el código correspondiente al Toolbar. Para esto, seguimos los pasos:

<ion-buttons slot="start">
  <ion-button (click)="getRaids()">
    <ion-icon slot="start" name="refresh"></ion-icon>
  </ion-button>
</ion-buttons>

Aquí, getRaids() es un método que definiremos para obtener la información de las ruedas. A continuación, preparamos el siguiente botón, el cual redirigirá a una nueva página para crear rodas.

<ion-buttons slot="end">
  <ion-button routerLink="/create-raide">
    <ion-icon slot="end" name="add"></ion-icon>
  </ion-button>
</ion-buttons>

¿Cómo implementar el método GetRaids?

Este método es fundamental. Su tarea principal es llamar a la API para obtener la información actualizada de las ruedas.

function getRaids() {
  // llamamos a la API para obtener las ruedas
  this.raidService.getRaids().subscribe((raids) => {
    this.raids = raids;
  });
}

¿Qué función cumplen las rutas dinámicas en la pantalla de creación?

La flexibilidad en las rutas es clave para reutilizar componentes, permitiendo al usuario crear o editar ruedas mediante un parámetro URI.

const routes: Routes = [
  {
    path: 'create-raide/:id',
    component: RaideFormPage
  },
  {
    path: 'create-raide',
    component: RaideFormPage
  }
];

¿Cómo inyectar el ActiveRoute para manejar parámetros?

El ActiveRoute es crucial para extraer parámetros de la URL, lo que permite comportamientos diferenciados según la acción del usuario (crear vs editar):

import { ActivatedRoute } from '@angular/router';

@Component({
  // ...
})
export class RaideFormPage implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      const id = params['id'];
      if (id) {
        this.loadRaide(id); // Método para cargar datos de la rueda específica
      }
    });
  }
}

¿Qué sigue después de los botones y rutas?

Ahora que nuestros botones están listos y las rutas funcionan correctamente, el siguiente paso es implementar el formulario que permitirá ingresar los detalles de las ruedas. Esto se realizará en una nueva clase que se centrará en la construcción de un formulario usando Angular forms para recolectar y validar los datos antes de ser enviados.