Platzi
Platzi

隆Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 6H : 15M : 49S

Debes iniciar sesi贸n

Para ver esta clase crea una cuenta sin costo o inicia sesi贸n

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Tipos de Data Binding y String Interpolation10/80

Data binding es la comunicaci贸n entre tu c贸digo de TypeScript y el HTML. Siempre ten presente que al cliente le importa lo que ve, as铆 que comunicar nuestro l贸gica (TypeScript) al template (HTML) es muy importante, para esto contamos con 4 tipos de Data Binding, en 茅ste v铆deo hablaremos de String Interpolation.

String Interpolation Enviar informaci贸n de TypeScript a HTML.

驴Qu茅 es Data Binding?

Comunicaci贸n entre t煤 c贸digo TypeScript y el HTML.

Lo 煤nico que al cliente (La empresa que nos contrat贸) le importa es lo que ve, as铆 que comunicar nuestra l贸gica (TypeScript) al template (HTML) es de suma importancia. Nuestro proyecto debe de estar presentable y hacerle sentir al cliente que todo va perfecto usando Data Binding.

Tipos de Data Binding en Angular 4.

String Interpolation {{}} TypeScript => HTML: Tener informaci贸n (Variable, Array, por ejemplo) y presentarla a los usuarios en modo de HTML.

Property Binding [] TypeScript <= HTML: Informaci贸n del lado de HTML que puede ser por ejemplo, informaci贸n que el usuario ingrese o que nosotros pongamos un valor por defecto. Viajando la informaci贸n de HTML a TypeScript.

Event Binding [] TypeScript <= HTML: Escuchar eventos desde HTML y pasarlo a TypeScript.

Two Way Data Binding [()] TypeScript <=> HTML: Comunicaci贸n de dos V铆as. De lo que el cliente ve a TypeScript como de TypeScript hacia lo que el cliente ve.

En String Interpolation es importante respetar la sintaxis para que HTML pueda entender TypeScript. La sintaxis es {{nombre}}. Las dos llaves son importantes.

Data Binding: Comunicaci贸n entre TS y HTML
Tipos:

  • String Interpolation: TS a HTML
  • Property Binding: HTML a TS
  • Event Binding: Eventos de HTML a TS
  • Two way databiing: Comunicaci贸n entre TS y HTML (bidireccional)

Creo que para los Event Bindings ser铆a () en vez de []

Me he dado cuenta que en la diapositiva sale err贸neo el event binding us谩ndolo con corchetes en vez de con par茅ntesis

Muy buena explicaci贸n sobre los diferentes tipos de Data Binding en Angular

Qu茅 es Data Binding?
Comunicaci贸n entre t煤 c贸digo TypeScript y el HTML.
Lo 煤nico que al cliente (La empresa que nos contrat贸) le importa es lo que ve, as铆 que comunicar nuestra l贸gica (TypeScript) al template (HTML) es de suma importancia. Nuestro proyecto debe de estar presentable y hacerle sentir al cliente que todo va perfecto usando Data Binding.

Tipos de Data Binding en Angular 4.
String Interpolation {{}} TypeScript => HTML: Tener informaci贸n (Variable, Array, por ejemplo) y presentarla a los usuarios en modo de HTML.
Property Binding [] TypeScript <= HTML: Informaci贸n del lado de HTML que puede ser por ejemplo, informaci贸n que el usuario ingrese o que nosotros pongamos un valor por defecto. Viajando la informaci贸n de HTML a TypeScript.
Event Binding [] TypeScript <= HTML: Escuchar eventos desde HTML y pasarlo a TypeScript.
Two Way Data Binding [()] TypeScript <=> HTML: Comunicaci贸n de dos V铆as. De lo que el cliente ve a TypeScript como de TypeScript hacia lo que el cliente ve.

En String Interpolation es importante respetar la sintaxis para que HTML pueda entender TypeScript. La sintaxis es {{nombre}}. Las dos llaves son importantes.

Definici贸n de Data Binding

Las cuatro maneras de hacer Data Binding (Tipos de Data Binding)

String interpolation aplicado

String interpolation

Sintaxis del String Interpolation

驴Que comando se utiliza para iniciar la aplicaci贸n?

buenas clases

Excelente explicaci贸n aprendiendo mucho.

Data Binding: es comunicar desde nuestro c贸digo (TypeScript) los datos que se muestran en el HTML para que vea el cliente.

Tipos:

  • String Interpolation: {{ }} - ts => html
  • Property Binding: [ ] - tc <= html
  • Event Binding: [ ] - ts <= html
  • Two Way Data Binding: [( )] - ts <=> html

las variables en el component.ts nunca se declaran con var o let o algo por el estilo?

Tipos de Data Binding (Intercambio de Datos)
String Interpolation
Property Binding
Event Binding
Two Way Data Binding

Tengo

<h1>
Welcome to {{title}} ! 
</h1>

y me aparece tal cual {{title}} ! cuando abro el html en el navegador. Sabe alguien el porque ?

Hola, 驴Alguien sabe qu茅 editor est谩 utilizando Eduardo? Gracias de antemano.

En pocas palabras, el Data Biding es la comunicacion entre la vista y lo procesado dentro del TypeScript. Es c贸mo conectamos lo que tenemos en c贸digo con lo que el cliente ve.

El String interpolation es c贸mo mostramos en HTML lo que generamos desde el TypeScript.

Vamos al archivo app.component.ts:

import { Component } from '@angular/core';

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

Dentro encontramos title, si cambiamos este valor el mismo se cambia en la vista mostr谩ndose el nuevo valor en el t铆tulo de la vista, reflejada en el valor title dentro del archivo app.component.html:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
</div>```

Recordemos que el c贸digo insertado se implementa con las llaves {{}}


Programacion reactiva,Two Way Data Binding [()]

La programaci贸n reactiva es la programaci贸n con flujos de datos as铆ncronos. Los buses de eventos (por ejemplo eventos de clicks) son un flujo de eventos as铆ncronos, en el que se pueden observar y reaccionar en consecuencia. Se pueden crear streams de datos de cualquier cosa.

Fuente :
https://www.adictosaltrabajo.com/tutoriales/programacion-reactiva-uso-de-la-libreria-rxjs/#01

me d aproblemas no me carga platzisquare he puesto la direcccion bien
127.0.0.1:4200

he resuelto el error que tenia lo he dejado como estaba
que puedo hacer??

En este caso alguien tiene un ejemplo para los tipos de data binding en angular 4, nombraron String interpolation, property binding, event binding,

Vengo del curso angular 6 :)

pregunta ayer apague mi pc por que tenia que ir a trabajar pero al querer reanudar en donde me quede no puedo echar a andar el angular en el navegador ocupo windows 10 ya tengo node.js instalado solo lo quiero volver a iniciar todo sin perder mi progreso

Muy buena explicaci贸n de String Interpolation, Lo que no entiendo porque no le pone el tipo de variable.?

El data binding es el proceso de comunicaci贸n de nuestro c贸digo de TypeScript, con la vista HTML que ve el usuario. Existen varios tipos de data binding:

  • String interpolation: TypeScript => HTML : {{ }}
    o Este tipo de data nos permite enviar informaci贸n de TypeScript a HTML, para usar y mostrar correctamente nuestro c贸digo TS en HTML, este debe ir encerrado dentro de dos llaves. Ejemplo: {{ variable1 }}, {{ numero1 + numero2 }} En nuestra vista se ver谩n los valores finales de las variables

String Interpolation {{}}
Nos permite mostrar el CONTENIDO de variables de Typescript en HTML

String interpolation: {{}} TS => HTML Property Binding: [] TS <= HTML Event Binding: [] TS <= HTML 2 Way Data Binding [()] TS <=> HTML

como se vuelve a correr en la consola

como tienes configurado php storm?

Comunicaci贸n entre TypeScript y HTML:

String Interpolation {{}}, Env铆a informaci贸n desde TypeScript hacia HTML
Property Binding [], Env铆a informaci贸n desde HTML hacia TypeScript
Event Binding[], Escucha alg煤n evento desde el lado del cliente HTML y env铆a informaci贸n hacia TypeScript
Two Way Data Binding [()], Comunicaci贸n de dos v铆as tanto como el cliente ve HTML y lo que se tiene del lado de TypeScript

驴Qu茅 es Data Binding?

Comunicaci贸n entre t煤 c贸digo TypeScript y el HTML.

Lo 煤nico que al cliente (La empresa que nos contrat贸) le importa es lo que ve, as铆 que comunicar nuestra l贸gica (TypeScript) al template (HTML) es de suma importancia. Nuestro proyecto debe de estar presentable y hacerle sentir al cliente que todo va perfecto usando Data Binding.

Tipos de Data Binding en Angular 4.

String Interpolation {{}} TypeScript => HTML: Tener informaci贸n (Variable, Array, por ejemplo) y presentarla a los usuarios en modo de HTML.

Property Binding [] TypeScript <= HTML: Informaci贸n del lado de HTML que puede ser por ejemplo, informaci贸n que el usuario ingrese o que nosotros pongamos un valor por defecto. Viajando la informaci贸n de HTML a TypeScript.

Event Binding [] TypeScript <= HTML: Escuchar eventos desde HTML y pasarlo a TypeScript.

Two Way Data Binding [()] TypeScript <=> HTML: Comunicaci贸n de dos V铆as. De lo que el cliente ve a TypeScript como de TypeScript hacia lo que el cliente ve.

En String Interpolation es importante respetar la sintaxis para que HTML pueda entender TypeScript. La sintaxis es {{nombre}}. Las dos llaves son importantes.

Data Binding: Comunicaci贸n entre TS y HTML
Tipos:

  • String Interpolation: TS a HTML
  • Property Binding: HTML a TS
  • Event Binding: Eventos de HTML a TS
  • Two way databiing: Comunicaci贸n entre TS y HTML (bidireccional)

Creo que para los Event Bindings ser铆a () en vez de []

Me he dado cuenta que en la diapositiva sale err贸neo el event binding us谩ndolo con corchetes en vez de con par茅ntesis

Muy buena explicaci贸n sobre los diferentes tipos de Data Binding en Angular

Qu茅 es Data Binding?
Comunicaci贸n entre t煤 c贸digo TypeScript y el HTML.
Lo 煤nico que al cliente (La empresa que nos contrat贸) le importa es lo que ve, as铆 que comunicar nuestra l贸gica (TypeScript) al template (HTML) es de suma importancia. Nuestro proyecto debe de estar presentable y hacerle sentir al cliente que todo va perfecto usando Data Binding.

Tipos de Data Binding en Angular 4.
String Interpolation {{}} TypeScript => HTML: Tener informaci贸n (Variable, Array, por ejemplo) y presentarla a los usuarios en modo de HTML.
Property Binding [] TypeScript <= HTML: Informaci贸n del lado de HTML que puede ser por ejemplo, informaci贸n que el usuario ingrese o que nosotros pongamos un valor por defecto. Viajando la informaci贸n de HTML a TypeScript.
Event Binding [] TypeScript <= HTML: Escuchar eventos desde HTML y pasarlo a TypeScript.
Two Way Data Binding [()] TypeScript <=> HTML: Comunicaci贸n de dos V铆as. De lo que el cliente ve a TypeScript como de TypeScript hacia lo que el cliente ve.

En String Interpolation es importante respetar la sintaxis para que HTML pueda entender TypeScript. La sintaxis es {{nombre}}. Las dos llaves son importantes.

Definici贸n de Data Binding

Las cuatro maneras de hacer Data Binding (Tipos de Data Binding)

String interpolation aplicado

String interpolation

Sintaxis del String Interpolation

驴Que comando se utiliza para iniciar la aplicaci贸n?

buenas clases

Excelente explicaci贸n aprendiendo mucho.

Data Binding: es comunicar desde nuestro c贸digo (TypeScript) los datos que se muestran en el HTML para que vea el cliente.

Tipos:

  • String Interpolation: {{ }} - ts => html
  • Property Binding: [ ] - tc <= html
  • Event Binding: [ ] - ts <= html
  • Two Way Data Binding: [( )] - ts <=> html

las variables en el component.ts nunca se declaran con var o let o algo por el estilo?

Tipos de Data Binding (Intercambio de Datos)
String Interpolation
Property Binding
Event Binding
Two Way Data Binding

Tengo

<h1>
Welcome to {{title}} ! 
</h1>

y me aparece tal cual {{title}} ! cuando abro el html en el navegador. Sabe alguien el porque ?

Hola, 驴Alguien sabe qu茅 editor est谩 utilizando Eduardo? Gracias de antemano.

En pocas palabras, el Data Biding es la comunicacion entre la vista y lo procesado dentro del TypeScript. Es c贸mo conectamos lo que tenemos en c贸digo con lo que el cliente ve.

El String interpolation es c贸mo mostramos en HTML lo que generamos desde el TypeScript.

Vamos al archivo app.component.ts:

import { Component } from '@angular/core';

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

Dentro encontramos title, si cambiamos este valor el mismo se cambia en la vista mostr谩ndose el nuevo valor en el t铆tulo de la vista, reflejada en el valor title dentro del archivo app.component.html:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
</div>```

Recordemos que el c贸digo insertado se implementa con las llaves {{}}


Programacion reactiva,Two Way Data Binding [()]

La programaci贸n reactiva es la programaci贸n con flujos de datos as铆ncronos. Los buses de eventos (por ejemplo eventos de clicks) son un flujo de eventos as铆ncronos, en el que se pueden observar y reaccionar en consecuencia. Se pueden crear streams de datos de cualquier cosa.

Fuente :
https://www.adictosaltrabajo.com/tutoriales/programacion-reactiva-uso-de-la-libreria-rxjs/#01

me d aproblemas no me carga platzisquare he puesto la direcccion bien
127.0.0.1:4200

he resuelto el error que tenia lo he dejado como estaba
que puedo hacer??

En este caso alguien tiene un ejemplo para los tipos de data binding en angular 4, nombraron String interpolation, property binding, event binding,

Vengo del curso angular 6 :)

pregunta ayer apague mi pc por que tenia que ir a trabajar pero al querer reanudar en donde me quede no puedo echar a andar el angular en el navegador ocupo windows 10 ya tengo node.js instalado solo lo quiero volver a iniciar todo sin perder mi progreso

Muy buena explicaci贸n de String Interpolation, Lo que no entiendo porque no le pone el tipo de variable.?

El data binding es el proceso de comunicaci贸n de nuestro c贸digo de TypeScript, con la vista HTML que ve el usuario. Existen varios tipos de data binding:

  • String interpolation: TypeScript => HTML : {{ }}
    o Este tipo de data nos permite enviar informaci贸n de TypeScript a HTML, para usar y mostrar correctamente nuestro c贸digo TS en HTML, este debe ir encerrado dentro de dos llaves. Ejemplo: {{ variable1 }}, {{ numero1 + numero2 }} En nuestra vista se ver谩n los valores finales de las variables

String Interpolation {{}}
Nos permite mostrar el CONTENIDO de variables de Typescript en HTML

String interpolation: {{}} TS => HTML Property Binding: [] TS <= HTML Event Binding: [] TS <= HTML 2 Way Data Binding [()] TS <=> HTML

como se vuelve a correr en la consola

como tienes configurado php storm?

Comunicaci贸n entre TypeScript y HTML:

String Interpolation {{}}, Env铆a informaci贸n desde TypeScript hacia HTML
Property Binding [], Env铆a informaci贸n desde HTML hacia TypeScript
Event Binding[], Escucha alg煤n evento desde el lado del cliente HTML y env铆a informaci贸n hacia TypeScript
Two Way Data Binding [()], Comunicaci贸n de dos v铆as tanto como el cliente ve HTML y lo que se tiene del lado de TypeScript