✅ fromEvent es un método que permite crear un Observable que recibe eventos determinados de un elemento del DOM.
Por ejemplo a través de fromEvent podemos interactuar con las coordenadas del cursor a través de toda la pantalla. Esto a través del evento mousemove y el elemento document.
Aquí está el código del profe, pero con tipado en Ts.
import { fromEvent } from "rxjs";
const onKey$ = fromEvent<KeyboardEvent>(document, "keydown"); //Se crea el observable que lanza un evento cuando se
//presione una tecla.
const observatorMouse = { //Se crea el observador que indica como usará la data obtenida.
next: (event: KeyboardEvent) => {
console.log("new event: ", event.key);
},
complete: () => {
console.log("There is no more events");
},
error: (error: Error) => {
console.log("Something went wrong: ", error.message);
}
}
onKey$.subscribe(observatorMouse); //Se subscribe el observador al observable.
Me acaba de surgir una pregunta: ¿por qué es mejor usar rxjs y no la api del navegador (el ``` addEventListener()
en verdad que buenas clases, muy pero muy bn explicado, felicidades...
Creates an Observable that emits events of a specific type coming from the given event target.
fromEvent(target, eventName)observableAlfa$.subscribe(observador);
//fromEvent to mousemove
const observableMouse$ = fromEvent(document, 'mousemove');
const observadorMouse$ = {
next: (value) => console.log('Mouse', value),
}
observableMouse$.subscribe(observadorMouse$);
//fromEvent to keydown
const observableKey$ = fromEvent(document, 'keydown');
const observadorKey$ = {
next: (value) => console.log('Keyboard', value.key),
}
observableKey$.subscribe(observadorKey$);
tengo una pregunta como capturo solo el primer evento de la tecla enter ejemplo para un Login
Crea un observable que emite eventos de un determinado elemento.
import { fromEvent } from 'rxjs';
const onKeyDown$ = fromEvent(document, 'keydown');
En esta sección, se importa la función fromEvent de RxJS. Esta función permite crear un Observable a partir de un evento específico en un elemento del DOM.
Luego, se crea un Observable llamado onKeyDown$ utilizando fromEvent. Este Observable está configurado para escuchar el evento de tecla presionada (keydown) en todo el documento (document).
const observableKeyDown = {
next: (event) => { console.log(event) },
};
Se define un objeto llamado observableKeyDown que tiene un método next. Este método se ejecutará cada vez que se emita un evento por parte del Observable. En este caso, el método simplemente imprime el evento en la consola
onKeyDown$.subscribe(observableKeyDown);
Finalmente, se suscribe el objeto observableKeyDown al Observable onKeyDown$ utilizando el método subscribe(). Esto significa que cada vez que se presione una tecla en el documento, el método next de observableKeyDown se ejecutará y el evento de tecla se imprimirá en la consola.
Víctor Andrés Córdova Poma
Aquí está el código del profe, pero con tipado en Ts.
import { fromEvent } from "rxjs"; const onKey$ = fromEvent<KeyboardEvent>(document, "keydown"); //Se crea el observable que lanza un evento cuando se //presione una tecla. const observatorMouse = { //Se crea el observador que indica como usará la data obtenida. next: (event: KeyboardEvent) => { console.log("new event: ", event.key); }, complete: () => { console.log("There is no more events"); }, error: (error: Error) => { console.log("Something went wrong: ", error.message); } } onKey$.subscribe(observatorMouse); //Se subscribe el observador al observable.
Nicolás Arévalo
Me acaba de surgir una pregunta: ¿por qué es mejor usar rxjs y no la api del navegador (el ``` addEventListener()
Marcelo Arias
Profesor¡Hola Nicolás! Buena pregunta.
fromEvent toma un comportamiento similar a addEventListener.
Sin embargo, aconsejaría usar fromEvent en situaciones donde podemos aprovechar el flujo de información continuo que hace un observable con operadores pipeables (este tema que se verá en el siguiente módulo).
Si nos conviene tener un control más sencillo de los eventos que se realizan en un elemento de la página. Incluyendo características como empezar a escuchar eventos, dejar de escuchar esos eventos, o hacer múltiples operaciones continuas con la información de esos eventos. fromEvent es una gran opción.
En otra situación, podemos usar, el popular, addEventListener.
Alfonso Navarro
Company_adminen verdad que buenas clases, muy pero muy bn explicado, felicidades...
Felipe de Jesús Ramirez Rodriguez
Observables: fromEvent
Creates an Observable that emits events of a specific type coming from the given event target.
fromEvent(target, eventName)observableAlfa$.subscribe(observador); //fromEvent to mousemove const observableMouse$ = fromEvent(document, 'mousemove'); const observadorMouse$ = { next: (value) => console.log('Mouse', value), } observableMouse$.subscribe(observadorMouse$); //fromEvent to keydown const observableKey$ = fromEvent(document, 'keydown'); const observadorKey$ = { next: (value) => console.log('Keyboard', value.key), } observableKey$.subscribe(observadorKey$);
Diego Fernando Caviedes Camaho
tengo una pregunta como capturo solo el primer evento de la tecla enter ejemplo para un Login
Marcelo Arias
ProfesorDiego Fernando Caviedes Camaho
Platzi Team
FormEvent
Crea un observable que emite eventos de un determinado elemento.
Vamos al codigo:
import { fromEvent } from 'rxjs'; const onKeyDown$ = fromEvent(document, 'keydown');
En esta sección, se importa la función fromEvent de RxJS. Esta función permite crear un Observable a partir de un evento específico en un elemento del DOM.
Luego, se crea un Observable llamado onKeyDown$ utilizando fromEvent. Este Observable está configurado para escuchar el evento de tecla presionada (keydown) en todo el documento (document).
const observableKeyDown = { next: (event) => { console.log(event) }, };
Se define un objeto llamado observableKeyDown que tiene un método next. Este método se ejecutará cada vez que se emita un evento por parte del Observable. En este caso, el método simplemente imprime el evento en la consola
onKeyDown$.subscribe(observableKeyDown);
Finalmente, se suscribe el objeto observableKeyDown al Observable onKeyDown$ utilizando el método subscribe(). Esto significa que cada vez que se presione una tecla en el documento, el método next de observableKeyDown se ejecutará y el evento de tecla se imprimirá en la consola.
¡Hola Diego!
Usando el observable fromEvent de RxJS (en reemplazo a addEventListener) se puede aplicar de la siguiente manera:
import { fromEvent } from 'rxjs'; const enter$ = fromEvent(document, 'keydown') .pipe( filter(event => event.key === 'Enter') ); enter$.subscribe(event => { console.log('Tecla Enter presionada'); });
para capturar el primer evento seria con operador, first,take, takewhile aqui les dejo el codigo https://stackblitz.com/edit/angular-rxjs-fromevents-for-escape-key-d6znwh?file=src%2Fapp%2Fapp.component.ts
const keyDowns$ = fromEvent(document, 'keydown').pipe( // filter((e: KeyboardEvent) => e.keyCode === 13), first() //takeWhile(conditicon) //take(2) ); const observer = { next: (escpress) => { if (escpress.type === 'keydown') { // Do your thing console.log('escape key only'); } }, }; keyDowns$.subscribe(observer);