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 : 4H : 47M : 18S

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

Event Binding12/80

Event binding funciona de forma muy similar a property binding es decir comunicamos informaci贸n desde HTML hacia TypeSCript con la diferencia de que ahora vamos a esperar una acci贸n especifica del usuario, por ejemplo un clic

Super me gusto. hasta hice un contador muy facil que react handleClick.
<h2>{clickeado}</h2>
<button [disabled]=鈥渓isto鈥 (click)=鈥渃lick()鈥>Click me!</button>
clickeado = 0;
click() {
this.clickeado += +1;
}

Esta excelente este curso.

Tipos de Data Binding, desde mi punto de vista鈥

String Interpolation: Intercambiar o reemplazar una etiqueta en especifica de un .textContent de un elemento del DOM por un dato relevante, es algo parecido al 鈥榬eplace鈥 de el objeto String:

String.replace("{{etiqueta}}", "dato relevante)

Y todo esto funciona automaticamente.

Property Binding: Todos los elementos o objetos del DOM tienen propiedades, ya que esto se denomina como un Mapa de Objetos.

Digamos una etiqueta button tiene un mapa de propiedades, como por ejemplo [class, style, disabled]
y lo que hace Angular es buscar dentro de sus propiedades de ese elemento los que comiencen por [ y terminen en ] despues Interpola a un evento real le quita los corchetes lo convierte en uno interpretable por el navegador e imprime el evento en el 鈥渂ack鈥 o en Typescript para su ejecucion.

Y todo esto funciona de forma automatica.

Event Binding: Igual al property Binding pero esta vez no busca [] si no parentesis () y esto los reemplaza y por ejemplo si colocamos (click) lo convierte a onClick y se lo inyecta al elemento dentro del DOM con la logica encontrada en typescript y esto si lo comprende el navegador.

En resumidas cuentas Event Binding y Property Binding son lo mismo porque onClick y Disabled son propiedades que cambian de forma automatica.

Puedo estar equivocado, pero bajo mis conocimientos es lo que interpreto.

Guau. Esto unido a las bases de datos me va a resultar verdaderamente grandioso 馃槂

Otros Event Binding que he usado son:

(keyup.ENTER) = 鈥渜ueHacerAlOprimirEnter();鈥
(keyup) = 鈥渜ueHacerAlOprimirCualquierTecla();鈥

Hasta el momento he entendido s煤per bien, y lo bueno es que las lecciones son cortas, 馃槂

Hice un bot贸n para hacer toggle con el [disabled], solo por diversi贸n.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <hr>
<button [disabled]="listo" (click)="hacerAlgo()">Click me!</button>
<button class="on-off" (click)="toggleButton()">On/Off</button>
</div>
toggleButton() {
  	this.listo ? this.listo = false : this.listo = true
  }

buenas clases

Bindeando a un evento de un control html

Event binding

Aclaraci贸n de lo que es Property binding

Bindeando desde un evento del html hacia un evento en el TS

Inspeccionando un error desde la consola de Chrome

Resumen

El event binding es la manera que tenemos de conectarnos a nuestro TS a partir de un evento de un control Html.

Cuando conectamos podemos conectarnos a una propiedad del TS o a un evento, esto nos permite ejecutar c贸digo en el TS desde el HTML.

Buenas noches, no s茅 si deba reportarlo por aqu铆 pero estoy viendo las clases sin embargo veo que no se est谩n dando el check como normalmente sucede, no s茅 si esto afecte y que no pueda dar el examen final.

Saludos.

Excelente Observacion

Event Biding: Captura eventos en HTML para ejecutar alguna funcion en TS

Que bueno leer los aportes de los dem谩s compa帽eros de hecho realice sus ejemplos para no quedarme atras.

  <button [disabled]="!listo" (click)="hacerAlgo()" (keyup.ENTER)="hacerAlgo()"> Click Me</button>
 
  <input type="text" name="nombredelacaja" placeholder="digite algo:" (keyup) = "calcularDatos()">
 
  <textarea (keyup.ENTER)="hacerAlgo()"  </textarea>



hacerAlgo(){
alert(鈥榟aciendo algo!鈥);
}

calcularDatos(){
alert(this.a+this.b);
}

en los videos 10 y 11 en el punto de event Biding esta colocado [] y en este video cambio a ().
pueden corregir eso, por favor

  • Event Binding: TypeScript <= HTML : ( )
    o Este tipo de dato, nos permite en el HTML llamar a un escuchador de eventos, cuando este evento suceda le indicara a TypeScript que ocurra alguna acci贸n, ejemplo: <button (click)=鈥漟unctionName( )鈥 > Hello !</button>, el evento que queramos escuchar ira dentro de los par茅ntesis, mientras que la acci贸n que ocurrir谩 ira definido como el valor, el valor es c贸digo TypeScript, es decir, que podemos llamar una funci贸n o cambiar el valor de una variable.

hacerAlgo you declared like hacerAlgo() and you said it鈥檚 a simple javascript declaration, but in javascript you write a function: function hacerAlgo or var hacerAlgo = ()

Por ac谩 dejo la documentacion de Angular sobre binding:
https://angular.io/guide/architecture-components#data-binding

En resumen se puede decir que son 4:
COMPONENT 鈥> DOM {{value}} a.k.a Interpolation
COMPONENT 鈥> DOM [property]=鈥渧alue鈥 a.k.a Property binding
COMPONENT <鈥 DOM (event) = 鈥渉andler鈥 a.k.a Event binding
COMPONENT <鈥> DOM [(ng-model)] = 鈥減roperty鈥 a.k.a Two-way binding

excelente explicaci贸n muy buen curso 馃槃

Que bueno que nuestro profesor aclara que este **framework ** es encandalozo con los errores.

no me sale la opci贸n para el chromeCast,
en la clase en vivo si me sale, pero ac谩 no, por que?

tengo un tag que dice <center> y explota el angular poque?

<center> {{a+b}}</center>
compiler.js:215 Uncaught Error: Template parse errors:
'center' is not a known element:
1. If 'center' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ```

Tengan cuidado en el html cuando asignen la funci贸n que el evento va a ejecutar debe ir con par茅ntesis () de lo contrario no se ejecutara la funci贸n.
(click)=鈥渃lickHandler()鈥

Super me gusto. hasta hice un contador muy facil que react handleClick.
<h2>{clickeado}</h2>
<button [disabled]=鈥渓isto鈥 (click)=鈥渃lick()鈥>Click me!</button>
clickeado = 0;
click() {
this.clickeado += +1;
}

Esta excelente este curso.

Tipos de Data Binding, desde mi punto de vista鈥

String Interpolation: Intercambiar o reemplazar una etiqueta en especifica de un .textContent de un elemento del DOM por un dato relevante, es algo parecido al 鈥榬eplace鈥 de el objeto String:

String.replace("{{etiqueta}}", "dato relevante)

Y todo esto funciona automaticamente.

Property Binding: Todos los elementos o objetos del DOM tienen propiedades, ya que esto se denomina como un Mapa de Objetos.

Digamos una etiqueta button tiene un mapa de propiedades, como por ejemplo [class, style, disabled]
y lo que hace Angular es buscar dentro de sus propiedades de ese elemento los que comiencen por [ y terminen en ] despues Interpola a un evento real le quita los corchetes lo convierte en uno interpretable por el navegador e imprime el evento en el 鈥渂ack鈥 o en Typescript para su ejecucion.

Y todo esto funciona de forma automatica.

Event Binding: Igual al property Binding pero esta vez no busca [] si no parentesis () y esto los reemplaza y por ejemplo si colocamos (click) lo convierte a onClick y se lo inyecta al elemento dentro del DOM con la logica encontrada en typescript y esto si lo comprende el navegador.

En resumidas cuentas Event Binding y Property Binding son lo mismo porque onClick y Disabled son propiedades que cambian de forma automatica.

Puedo estar equivocado, pero bajo mis conocimientos es lo que interpreto.

Guau. Esto unido a las bases de datos me va a resultar verdaderamente grandioso 馃槂

Otros Event Binding que he usado son:

(keyup.ENTER) = 鈥渜ueHacerAlOprimirEnter();鈥
(keyup) = 鈥渜ueHacerAlOprimirCualquierTecla();鈥

Hasta el momento he entendido s煤per bien, y lo bueno es que las lecciones son cortas, 馃槂

Hice un bot贸n para hacer toggle con el [disabled], solo por diversi贸n.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <hr>
<button [disabled]="listo" (click)="hacerAlgo()">Click me!</button>
<button class="on-off" (click)="toggleButton()">On/Off</button>
</div>
toggleButton() {
  	this.listo ? this.listo = false : this.listo = true
  }

buenas clases

Bindeando a un evento de un control html

Event binding

Aclaraci贸n de lo que es Property binding

Bindeando desde un evento del html hacia un evento en el TS

Inspeccionando un error desde la consola de Chrome

Resumen

El event binding es la manera que tenemos de conectarnos a nuestro TS a partir de un evento de un control Html.

Cuando conectamos podemos conectarnos a una propiedad del TS o a un evento, esto nos permite ejecutar c贸digo en el TS desde el HTML.

Buenas noches, no s茅 si deba reportarlo por aqu铆 pero estoy viendo las clases sin embargo veo que no se est谩n dando el check como normalmente sucede, no s茅 si esto afecte y que no pueda dar el examen final.

Saludos.

Excelente Observacion

Event Biding: Captura eventos en HTML para ejecutar alguna funcion en TS

Que bueno leer los aportes de los dem谩s compa帽eros de hecho realice sus ejemplos para no quedarme atras.

  <button [disabled]="!listo" (click)="hacerAlgo()" (keyup.ENTER)="hacerAlgo()"> Click Me</button>
 
  <input type="text" name="nombredelacaja" placeholder="digite algo:" (keyup) = "calcularDatos()">
 
  <textarea (keyup.ENTER)="hacerAlgo()"  </textarea>



hacerAlgo(){
alert(鈥榟aciendo algo!鈥);
}

calcularDatos(){
alert(this.a+this.b);
}

en los videos 10 y 11 en el punto de event Biding esta colocado [] y en este video cambio a ().
pueden corregir eso, por favor

  • Event Binding: TypeScript <= HTML : ( )
    o Este tipo de dato, nos permite en el HTML llamar a un escuchador de eventos, cuando este evento suceda le indicara a TypeScript que ocurra alguna acci贸n, ejemplo: <button (click)=鈥漟unctionName( )鈥 > Hello !</button>, el evento que queramos escuchar ira dentro de los par茅ntesis, mientras que la acci贸n que ocurrir谩 ira definido como el valor, el valor es c贸digo TypeScript, es decir, que podemos llamar una funci贸n o cambiar el valor de una variable.

hacerAlgo you declared like hacerAlgo() and you said it鈥檚 a simple javascript declaration, but in javascript you write a function: function hacerAlgo or var hacerAlgo = ()

Por ac谩 dejo la documentacion de Angular sobre binding:
https://angular.io/guide/architecture-components#data-binding

En resumen se puede decir que son 4:
COMPONENT 鈥> DOM {{value}} a.k.a Interpolation
COMPONENT 鈥> DOM [property]=鈥渧alue鈥 a.k.a Property binding
COMPONENT <鈥 DOM (event) = 鈥渉andler鈥 a.k.a Event binding
COMPONENT <鈥> DOM [(ng-model)] = 鈥減roperty鈥 a.k.a Two-way binding

excelente explicaci贸n muy buen curso 馃槃

Que bueno que nuestro profesor aclara que este **framework ** es encandalozo con los errores.

no me sale la opci贸n para el chromeCast,
en la clase en vivo si me sale, pero ac谩 no, por que?

tengo un tag que dice <center> y explota el angular poque?

<center> {{a+b}}</center>
compiler.js:215 Uncaught Error: Template parse errors:
'center' is not a known element:
1. If 'center' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ```

Tengan cuidado en el html cuando asignen la funci贸n que el evento va a ejecutar debe ir con par茅ntesis () de lo contrario no se ejecutara la funci贸n.
(click)=鈥渃lickHandler()鈥