Logo de Código Facilito
  • Inicio
  • Replays
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso profesional de Angular - old!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso profesional de Angular - old

Video Sincronización de datos (Data Binding)

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

Hablemos de Data Binding, una de las cosas que nos impresiona tanto de usar Angular.

La idea detrás de este concepto, es mantener la información de nuestras vistas actualizada, sin tener que nosotros actualizarla constantemente, simplemente cuando un cambio sucede, toda nuestra vista reacciona a este cambio y actualiza la información presentada.

Esto va desde cosas sencillas como actualizar el valor de una propiedad del componente en la vista, cuando el valor de dicha propiedad cambia, hasta re evaluar la condición de una directiva ngIf para volver a mostrar u ocultar un elemento.

Una de las complejidades de trabajar con interfaces en programación, es precisamente mantener nuestros datos actualizados en todo momento, esto es especialmente importante en entornos como el de las páginas web donde mucha de la información se actualiza de manera asíncrona, lo que significa que normalmente no sabemos cuándo estará disponible o no un dato.

Para solucionar eso, existe un patrón de programación muy popular, el de la programación reactiva.

La programación reactiva es como trabajar con Excel, de algún modo, recuerda que en Excel tu puedes hacer cálculos basados en el valor de una celda, para asignarle información a otra. Lo interesante de esto es que cuando tú actualizas alguna celda que funciona para el cálculo de otra, todas se actualizan a este nuevo cambio, sin que tengas que volver a hacer la operación o tengas que indicar que el cálculo se vuelva a realizar.

De eso se trata la programación reactiva, si tengo una variable X que sirve para calcular Z, actualizar la variable X debería automáticamente actualizar Z.

El binding de datos de Angular, que iremos viendo a detalle en los siguientes vídeos, es una implementación de la programación reactiva, de esta manera como mencioné antes, podemos actualizar los datos de nuestros componentes de manera asíncrona ya sea con eventos de la interfaz o peticiones AJAX y sabemos que nuestra vista reaccionará a estos cambios y actualizará la información que presenta.

Si aún no estás sorprendido o intrigado, espera a que veas el concepto en acción. Continuemos

  • Módulo 1 | 7 clases

    Introducción

    expand_more
    • play_circle_outline

      Clase 1

      Introducción al curso de Angular

    • play_circle_outline

      Clase 2

      Qué aprenderemos en este curso

    • play_circle_outline

      Clase 3

      Conocimientos previos

    • play_circle_outline

      Clase 4

      Qué es Angular

    • play_circle_outline

      Clase 5

      Diferencias entre AngularJS y Angular

    • play_circle_outline

      Clase 6

      Control de versiones semántico (semantic versioning)

    • play_circle_outline

      Clase 7

      Anatomía de un proyecto de Angular

  • Módulo 2 | 9 clases

    Primeros pasos con Angular

    expand_more
    • play_circle_outline

      Clase 1

      Web Components

    • play_circle_outline

      Clase 2

      Crear un componente

    • play_circle_outline

      Clase 3

      Templates

    • play_circle_outline

      Clase 4

      Interpolación

    • play_circle_outline

      Clase 5

      Propiedades y métodos de un componente

    • play_circle_outline

      Clase 6

      ngOnInit

    • play_circle_outline

      Clase 7

      Estilos

    • play_circle_outline

      Clase 8

      ngContent

    • play_circle_outline

      Clase 9

      Ejercicio con ngContent y componentes

  • Módulo 3 | 21 clases

    Componentes a detalle

    expand_more
    • play_circle_outline

      Clase 1

      Expresiones de un template de Angular

    • play_arrow

      Clase 2

      Sincronización de datos (Data Binding)

    • play_circle_outline

      Clase 3

      One way binding (interpolación)

    • play_circle_outline

      Clase 4

      Property binding

    • play_circle_outline

      Clase 5

      ngClass

    • play_circle_outline

      Clase 6

      Directivas Estructurales

    • play_circle_outline

      Clase 7

      ngIf

    • play_circle_outline

      Clase 8

      Ejercicio con ngIf y ngClass

    • play_circle_outline

      Clase 9

      ngFor

    • play_circle_outline

      Clase 10

      ngSwitch

    • play_circle_outline

      Clase 11

      Eventos

    • play_circle_outline

      Clase 12

      Nuevo componente para siguientes ejemplos

    • play_circle_outline

      Clase 13

      Payload de un evento con $event

    • play_circle_outline

      Clase 14

      Eventos personalizados (EventEmitter)

    • play_circle_outline

      Clase 15

      Input properties

    • play_circle_outline

      Clase 16

      Variables de referencia del template

    • play_circle_outline

      Clase 17

      Two way binding con ngModel

    • play_circle_outline

      Clase 18

      Pipes

    • play_circle_outline

      Clase 19

      Cómo crear mi propio Pipe

    • play_circle_outline

      Clase 20

      Cómo crear mi propia directiva de atributo

    • play_circle_outline

      Clase 21

      HostListener para eventos

  • Módulo 4 | 14 clases

    Servicios y Observadores

    expand_more
    • play_circle_outline

      Clase 1

      Actualizar a Angular 6

    • play_circle_outline

      Clase 2

      Servicios en Angular

    • play_circle_outline

      Clase 3

      Crear tu propio servicio

    • play_circle_outline

      Clase 4

      Consultas asíncronas

    • play_circle_outline

      Clase 5

      Inyector de dependencias en Angular

    • play_circle_outline

      Clase 6

      Compartir datos de un servicio

    • play_circle_outline

      Clase 7

      Programación reactiva

    • play_circle_outline

      Clase 8

      El patrón del observable

    • play_circle_outline

      Clase 9

      Observadores y Observables en RxJS

    • play_circle_outline

      Clase 10

      Operadores en RxJS

    • play_circle_outline

      Clase 11

      Async Pipe

    • play_circle_outline

      Clase 12

      Operador de navegación segura ?.

    • play_circle_outline

      Clase 13

      Async y suscripciones a un Observable

    • play_circle_outline

      Clase 14

      Servicios en Angular 6

  • Módulo 5 | 7 clases

    Animaciones

    expand_more
    • play_circle_outline

      Clase 1

      Animaciones CSS

    • play_circle_outline

      Clase 2

      Configurar módulo de animaciones

    • play_circle_outline

      Clase 3

      Estados y Transiciones

    • play_circle_outline

      Clase 4

      Aplicar estilos a estados y animaciones

    • play_circle_outline

      Clase 5

      Ejercicio de animación con Angular

    • play_circle_outline

      Clase 6

      Organizar animaciones

    • play_circle_outline

      Clase 7

      Animaciones de listas y escalonadas

  • Módulo 6 | 2 clases

    Cierre del curso

    expand_more
    • play_circle_outline

      Clase 1

      Build de producción

    • play_circle_outline

      Clase 2

      Despedida

Sincronización de datos (Data Binding)

arrow_back Siguiente arrow_forward
Curso profesional de Angular - old