You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Welcome to the Angular signals tutorial! [Signals](/essentials/signals) are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes.
4
+
5
+
In this activity, you'll learn how to:
6
+
7
+
- Create your first signal using the `signal()` function
8
+
- Display its value in a template
9
+
- Update the signal value using `set()` and `update()` methods
10
+
11
+
Let's build an interactive user status system with signals!
12
+
13
+
<hr />
14
+
15
+
<docs-workflow>
16
+
17
+
<docs-steptitle="Import the signal function">
18
+
Import the `signal` function from `@angular/core` at the top of your component file.
The `update()` method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state.
106
+
107
+
</docs-step>
108
+
109
+
<docs-steptitle="Add the toggle button handler">
110
+
The toggle button is already in the template. Connect it to your `toggleStatus()` method:
Congratulations! You've created your first signal and learned how to update it using both `set()` and `update()` methods. The `signal()` function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes.
123
+
124
+
Next, you'll learn [how to derive state from signals using computed](/tutorials/signals/2-deriving-state-with-computed-signals)!
You might notice `ChangeDetectionStrategy.OnPush` in the component decorator throughout this tutorial. This is a performance optimization for Angular components that use signals. For now, you can safely ignore it—just know it helps your app run faster when using signals! You can learn more in the [change detection strategies API docs](/api/core/ChangeDetectionStrategy).
Welcome to the Angular signals tutorial! [Signals](/essentials/signals)are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes.
3
+
¡Bienvenido al tutorial de signals de Angular! Los [signals](/essentials/signals)son la primitiva reactiva de Angular que proporciona una forma de gestionar estado y actualizar automáticamente tu UI cuando ese estado cambia.
4
4
5
-
In this activity, you'll learn how to:
5
+
En esta actividad, aprenderás cómo:
6
6
7
-
-Create your first signal using the `signal()` function
8
-
-Display its value in a template
9
-
-Update the signal value using `set()`and`update()` methods
7
+
-Crear tu primer signal usando la función `signal()`
8
+
-Mostrar su valor en una plantilla
9
+
-Actualizar el valor del signal usando los métodos `set()`y`update()`
10
10
11
-
Let's build an interactive user status system with signals!
11
+
¡Construyamos un sistema interactivo de estado de usuario con signals!
12
12
13
13
<hr />
14
14
15
15
<docs-workflow>
16
16
17
-
<docs-steptitle="Import the signal function">
18
-
Import the `signal`function from `@angular/core`at the top of your component file.
17
+
<docs-steptitle="Importa la función signal">
18
+
Importa la función `signal`desde `@angular/core`al inicio de tu archivo de componente.
The `update()`method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state.
105
+
El método `update()`toma una función que recibe el valor actual y devuelve el nuevo valor. Esto es útil cuando necesitas modificar el valor existente basado en su estado actual.
106
106
107
107
</docs-step>
108
108
109
-
<docs-steptitle="Add the toggle button handler">
110
-
The toggle button is already in the template. Connect it to your`toggleStatus()` method:
109
+
<docs-steptitle="Agrega el manejador del botón toggle">
110
+
El botón toggle ya está en la plantilla. Conéctalo a tu método`toggleStatus()`:
@@ -119,12 +119,12 @@ The toggle button is already in the template. Connect it to your `toggleStatus()
119
119
120
120
</docs-workflow>
121
121
122
-
Congratulations! You've created your first signal and learned how to update it using both `set()`and`update()` methods. The `signal()`function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes.
122
+
¡Felicidades! Has creado tu primer signal y aprendido cómo actualizarlo usando los métodos `set()`y`update()`. La función `signal()`crea un valor reactivo que Angular rastrea, y cuando lo actualizas, tu UI refleja automáticamente los cambios.
123
123
124
-
Next, you'll learn [how to derive state from signals using computed](/tutorials/signals/2-deriving-state-with-computed-signals)!
124
+
A continuación, aprenderás [cómo derivar estado de signals usando computed](/tutorials/signals/2-deriving-state-with-computed-signals)!
<docs-callouthelpfultitle="Acerca de ChangeDetectionStrategy.OnPush">
127
127
128
-
You might notice `ChangeDetectionStrategy.OnPush`in the component decorator throughout this tutorial. This is a performance optimization for Angular components that use signals. For now, you can safely ignore it—just know it helps your app run faster when using signals! You can learn more in the [change detection strategies API docs](/api/core/ChangeDetectionStrategy).
128
+
Puedes notar `ChangeDetectionStrategy.OnPush`en el decorador del componente a lo largo de este tutorial. Esta es una optimización de rendimiento para componentes Angular que usan signals. Por ahora, puedes ignorarlo de forma segura — solo debes saber que ayuda a tu aplicación a funcionar más rápido cuando usas signals. Puedes aprender más en la [documentación de la API de estrategias de detección de cambios](/api/core/ChangeDetectionStrategy).
0 commit comments