¿Qué son los signals y cómo usarlos en Angular?
Angular 16 ha traído consigo una nueva característica emocionante: los signals. Pero, ¿qué son exactamente los signals y cómo podemos sacarles provecho en nuestros proyectos de Angular?
En Angular, los signals son eventos que se emiten y escuchan en componentes. Estos eventos nos permiten comunicar información entre componentes de manera eficiente y reactiva.
Para utilizar signals en Angular, primero necesitamos importar la clase Signal de la librería correspondiente:
import { Signal } from '@angular/core';
Luego, podemos declarar un signal en un componente de la siguiente manera:
export class MiComponente {
miSignal = new Signal();
}
Una vez que hemos declarado nuestro signal, podemos emitir un evento utilizando el método emit:
this.miSignal.emit('información importante');
Para subscribirnos a un signal y escuchar los eventos emitidos, podemos hacerlo de la siguiente manera:
this.miSignal.subscribe((data) => {
console.log('Evento recibido:', data);
});
De esta forma, podemos utilizar signals para comunicar información entre componentes de manera eficiente y reactiva en Angular 16. ¡No dudes en experimentar con esta nueva característica y llevar tus proyectos al siguiente nivel!
🚀 ChatGPT + Whatsapp ⮕ https://youtu.be/FlWM9ZbMDWs
⮕ ¿Te apuntas Workshop de AI? https://forms.gle/bbyYVUhjeuX5fwpK9
⮕ 𝙉𝙊𝘿𝙀 ⮕ https://link.codigoencasa.com/NODE
⮕ 🤓 Curso Crear Chatbot: https://link.codigoencasa.com/CURSO-CHATBOT
Yo pienso que todos los signals que se declaran en el effect es una manera de agregar las dependencias para posteriormente agregar un efecto a las mismas, es decir, va a causar un efecto para cada de una de las instancias declaradas dentro del callback para hacer lo que quieras. Esto es muy parecido a la ejecucion del useEffect de React hecho de otra manera.
Excelente, gracias por compartir..
Excelente Leifer
Que webcam usas?
Excelente vídeo. Me gustaría saber si los signals funcionan en un FormGroup?
Leifer, tus cursos de express y nest son completisimos. El unico detalle es que no eres preciso con el repositorio ya que le haces demaciados cambios luego de grabar el video y eso es muy confuso para los que quieren clonar tu proyecto. Te lo digo por que me gustaria continuar aprendiendo contigo!
buen video leifer, pero deberias dejar que termine de explicar algo , luego preguntar y no hablarle encima
Pero si se dan cuenta ? estan copiando a vue en la reactividad jajaj, que chistoso! en vue todo eso lo haces con un composable, creas un composable llamado signals y creamos las funciones set, update, mutate, etc, lo que quieras, lo llamas y luego tenemos el watchEffect y podemos leer los cambios reactivos de lo que este dentro del callback del watchEffect.
En fin un dia vue copio lo mejor de angular y react, ahora son estos quienes le copian. :V byee.
Gran video. Crack Kevin!
Excelente! Muy bien video, una acotación: un signal no es una función, Angular lo toma como una tipo primitivo, no es que ejecutemos una función en el template, Angular lo reconoce como una variable… Saludos!
Excelente!. Muchas gracias por este podcast tan instructivo.
Muy buen video, muchas gracias.
Quisiera ayudar tambien.
Mira lo que me se yo 🙂
Puedes Primero incrementa el valor y luego devolverselo
`this.sample.update(number => ++number);` con el ++ antes de la variable
Con una lista de signals, se pueden declarar a que signal reaccionar en el objeto del effect.
Saludos
me gusta mucho el contenido de kevin, cabe mencionar que signals viene con toObservable (transforma un signal a observable) y toSignal (transforma un observable a signal) entonces tenemos la maravilla de los operadores y la facilidad de signals
Ya salió A-16????
Ahí, acercándose a Vue
¡Súper! ¿Qué día saldrá la V16 estable? ¿falta mucho?