El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

La vinculación de datos es un concepto fundamental en el desarrollo de aplicaciones con Ionic y Angular. Permite sincronizar los datos entre el modelo y la vista de manera eficiente, facilitando la creación de interfaces de usuario dinámicas y reactivas.

Conceptos Clave

Modelo: Representa los datos de la aplicación.
Vista: La interfaz de usuario que se muestra al usuario final.
Vinculación de Datos: El proceso de sincronización entre el modelo y la vista.

Tipos de Vinculación de Datos

Vinculación Unidireccional (One-Way Binding):
- Desde el Modelo a la Vista: Los cambios en el modelo se reflejan automáticamente en la vista.
- Desde la Vista al Modelo: Los cambios en la vista se reflejan automáticamente en el modelo.
Vinculación Bidireccional (Two-Way Binding):
- Los cambios en el modelo y la vista se sincronizan automáticamente en ambas direcciones.

Ejemplos Prácticos

Vinculación Unidireccional: Desde el Modelo a la Vista

<!-- app.component.html -->
<p>{{ message }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  message: string = 'Hola, Mundo!';
}

Explicación:

En el archivo HTML, {{ message }} es una expresión de interpolación que vincula el valor de message en el componente TypeScript a la vista.
Cuando message cambia en el componente, la vista se actualiza automáticamente.

Vinculación Unidireccional: Desde la Vista al Modelo

<!-- app.component.html -->
<input (input)="onInputChange($event)" placeholder="Escribe algo...">
<p>{{ userInput }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userInput: string = '';

  onInputChange(event: any) {
    this.userInput = event.target.value;
  }
}

Explicación:

El evento (input) en el elemento <input> llama al método onInputChange en el componente cada vez que el usuario escribe algo.
onInputChange actualiza la propiedad userInput, que a su vez se refleja en la vista.

Vinculación Bidireccional

<!-- app.component.html -->
<input [(ngModel)]="userInput" placeholder="Escribe algo...">
<p>{{ userInput }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userInput: string = '';
}

Explicación:

[(ngModel)] es una directiva de Angular que permite la vinculación bidireccional.
Los cambios en el <input> se reflejan automáticamente en userInput, y viceversa.

Ejercicio Práctico

Ejercicio 1: Crear una Lista de Tareas

Objetivo: Crear una aplicación simple de lista de tareas donde los usuarios puedan agregar y eliminar tareas.

Paso 1: Crear el Componente

// task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent {
  tasks: string[] = [];
  newTask: string = '';

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

Paso 2: Crear la Vista

<!-- task-list.component.html -->
<div>
  <input [(ngModel)]="newTask" placeholder="Nueva tarea">
  <button (click)="addTask()">Agregar</button>
</div>
<ul>
  <li *ngFor="let task of tasks; let i = index">
    {{ task }}
    <button (click)="removeTask(i)">Eliminar</button>
  </li>
</ul>

Explicación:

[(ngModel)] vincula newTask al <input>.
(click)="addTask()" llama al método addTask cuando se hace clic en el botón "Agregar".
*ngFor itera sobre la lista de tasks y muestra cada tarea en un <li>.
(click)="removeTask(i)" llama al método removeTask con el índice de la tarea cuando se hace clic en el botón "Eliminar".

Solución del Ejercicio

// task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent {
  tasks: string[] = [];
  newTask: string = '';

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

<!-- task-list.component.html -->
<div>
  <input [(ngModel)]="newTask" placeholder="Nueva tarea">
  <button (click)="addTask()">Agregar</button>
</div>
<ul>
  <li *ngFor="let task of tasks; let i = index">
    {{ task }}
    <button (click)="removeTask(i)">Eliminar</button>
  </li>
</ul>

Conclusión

En esta lección, hemos aprendido los conceptos básicos de la vinculación de datos en Ionic y Angular, incluyendo la vinculación unidireccional y bidireccional. También hemos implementado un ejercicio práctico para reforzar estos conceptos. La vinculación de datos es una herramienta poderosa que facilita la creación de aplicaciones dinámicas y reactivas. En el próximo módulo, exploraremos cómo trabajar con servicios y APIs para manejar datos de manera más avanzada.

Introducción a la Vinculación de Datos

Conceptos Clave

Tipos de Vinculación de Datos

Ejemplos Prácticos

Vinculación Unidireccional: Desde el Modelo a la Vista

Vinculación Unidireccional: Desde la Vista al Modelo

Vinculación Bidireccional

Ejercicio Práctico

Ejercicio 1: Crear una Lista de Tareas

Paso 1: Crear el Componente

Paso 2: Crear la Vista

Solución del Ejercicio

Conclusión

Curso de Desarrollo con Ionic

Módulo 1: Introducción a Ionic

Módulo 2: Componentes Básicos y Navegación

Módulo 3: Estilización y Tematización

Módulo 4: Trabajando con Datos

Módulo 5: Componentes y Funcionalidades Avanzadas

Módulo 6: Pruebas y Despliegue

Módulo 7: Temas Avanzados