DEV Community: Cristian Arieta

Angular Pipes: Transformando Datos Directamente en tus Plantillas HTML 🔧 - Guía Exhaustiva ✨

Cristian Arieta — Sat, 05 Apr 2025 17:54:55 +0000

1. Introducción y Objetivos de Aprendizaje:

¡Hola, desarrolladores! 👋 Hoy nos sumergiremos en una de las características más elegantes de Angular: los Pipes 💧. Imaginen que tienen datos crudos en su componente (una fecha 📅, un número #️⃣, un texto largo 📜), pero necesitan mostrarlos en la plantilla HTML con un formato específico (fecha corta, moneda 💰, texto abreviado). Los Pipes son los "transformadores" 🪄 que nos permiten hacer esto directamente en el HTML, de forma limpia y reutilizable.
Desde una perspectiva de arquitectura de software 🏗️, los Pipes son cruciales para adherirse al principio de Separación de Responsabilidades. La lógica de cómo mostrar los datos (formateo) pertenece a la capa de presentación (la plantilla), no necesariamente a la lógica de negocio del componente. Los Pipes encapsulan esta lógica de transformación ⚙️, haciéndola testeable ✅, reutilizable 🔄 y manteniendo los componentes más ligeros y enfocados en gestionar el estado y la interacción. Además, Angular optimiza el uso de Pipes (especialmente los "puros") para un rendimiento eficiente 🚀.
(Nota de Repaso): Al finalizar esta nota, usted podrá:
- ✅ Definir qué es un Pipe en Angular y cuál es su propósito principal.
- ✅ Identificar y utilizar los Pipes incorporados (built-in) más comunes de Angular.
- ✅ Comprender cómo pasar argumentos a los Pipes para personalizar la transformación.
- ✅ Encadenar múltiples Pipes para aplicar varias transformaciones secuencialmente.
- ✅ Crear y utilizar sus propios Pipes personalizados (Custom Pipes).
- ✅ Distinguir entre Pipes Puros e Impuros y entender sus implicaciones de rendimiento.
- ✅ Aplicar Pipes correctamente en las plantillas HTML de Angular usando la sintaxis |.

2. Conceptos Fundamentales (Definiciones Clave):

Pipe 🔧: Una clase decorada con @Pipe que implementa la interfaz PipeTransform. Su función principal es transformar un valor de entrada en un valor de salida formateado para ser mostrado en una plantilla HTML.
Transformación 🔄: El proceso de convertir datos de un formato a otro (ej: objeto Date a string dd/MM/yyyy, número 1234.56 a string $1,234.56).
PipeTransform (Interfaz) 📝: Interfaz que debe implementar toda clase Pipe. Define un único método obligatorio: transform.
transform(value: any, ...args: any[]): any (Método) ✨: El corazón del Pipe. Recibe el valor original (value) que fluye desde la izquierda del operador | en la plantilla, y opcionalmente, argumentos adicionales (args) pasados después de dos puntos (:). Debe devolver el valor transformado.
Sintaxis en Plantilla (➡️ |): El operador "pipe" se usa en las expresiones de interpolación ({{ }}) o en los data bindings ([property]="expression | pipe") para aplicar un Pipe. {{ valor | nombreDelPipe }}.
Argumentos de Pipe (➡️ :): Se pasan argumentos adicionales al método transform usando dos puntos después del nombre del Pipe. {{ valor | nombreDelPipe:arg1:arg2 }}.
Encadenamiento de Pipes ⛓️: Aplicar múltiples Pipes secuencialmente. La salida de un Pipe se convierte en la entrada del siguiente. {{ valor | pipe1 | pipe2:arg1 }}.

3. Desarrollo del Tema: El Poder de los Pipes en Acción 🛠️

Piensen en los datos fluyendo a través de "tuberías" (pipes) en su plantilla 💧➡️💧➡️🖥️. Cada tubería toma el dato, le hace algo (lo formatea, lo filtra, lo modifica) y lo pasa al siguiente, o finalmente lo muestra en la pantalla.
Profundicemos en los detalles técnicos y casos de uso:

A. ¿Por qué usar Pipes?
- ✅ Legibilidad del Template: Mantiene las expresiones en HTML limpias. {{ fechaCumpleanos | date:'shortDate' }} vs {{ formatearFechaCorta(fechaCumpleanos) }}.
- ✅ Reutilización: La lógica de formato es reutilizable en toda la app.
- ✅ Separación de Responsabilidades: Componente (qué datos) vs Pipe (cómo mostrarlos).
- ✅ Performance (Pipes Puros): Angular optimiza su ejecución 🚀.
- ✅ Testabilidad: Fáciles de probar unitariamente 🧪.
B. Cómo Llamar Pipes desde HTML 💻:
- Sintaxis Básica: {{ expresionAngular | nombrePipe }}
```
{{ titulo | uppercase }} 
```
- Con Argumentos ⚙️: {{ expresionAngular | nombrePipe:argumento1:argumento2:... }}
```
Fecha: {{ fechaActual | date:'dd/MM/yyyy' }} 
Número: {{ numeroGrande | number:'1.2-2' }} 
```
- Encadenamiento ⛓️: {{ expresionAngular | pipe1 | pipe2:argPipe2 | pipe3 }}
```
{{ descripcionLarga | slice:0:15 | uppercase }}... 
```
C. Pipes Incorporados (Built-in) Más Comunes:
- 📅 DatePipe: Formatea fechas. {{ miFecha | date:'medium' }}.
- 🅰️ UpperCasePipe: Convierte texto a MAYÚSCULAS. {{ texto | uppercase }}.
- 🔡 LowerCasePipe: Convierte texto a minúsculas. {{ texto | lowercase }}.
- 📖 TitleCasePipe: Convierte texto a Formato Título. {{ texto | titlecase }}.
- #️⃣ DecimalPipe (number): Formatea números. {{ numero | number:'1.0-2' }}.
- % PercentPipe: Formatea números como porcentajes. {{ 0.25 | percent }} (25%).
- 💰 CurrencyPipe: Formatea números como moneda. {{ precio | currency:'USD':'symbol' }} ($1,234.56).
- {} JsonPipe: Convierte objeto/array a JSON string (ideal para debug). {{ miObjeto | json }}.
- ✂️ SlicePipe: Extrae sub-sección de array/string. {{ miArray | slice:1:3 }}.
- 🔑 KeyValuePipe: Itera sobre objetos/Maps en *ngFor. *ngFor="let item of miObjeto | keyvalue".
- ⏳/⚡️ AsyncPipe: Se suscribe/desuscribe a Observables/Promises. {{ miObservable$ | async }}.
D. Creando Pipes Personalizados (Custom Pipes) 🔧:
1. Generación (CLI) ⌨️: ng generate pipe nombre-del-pipe (ej: ng g p truncate).
2. Implementación ✍️: Edita nombre-del-pipe.pipe.ts, implementa transform().
```
// Ejemplo: truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
 transform(value: string, limit: number = 20, trail: string = '...'): string {
 // ... (lógica de truncar) ...
 return value.length > limit ? value.substring(0, limit) + trail : value;
 }
}
```

    3.  Registro ✅:
        * Standalone Components: Importa en `imports: [..., TruncatePipe]`.
        * NgModules: Declara en `declarations: [...]`.
    4. Uso en Plantilla 💻: `{{ miTexto | truncate:100:' ->' }}`.

   Pipes Puros vs. Impuros:**
    * Pipes Puros 💧 (`pure: true` - por defecto):
        * Se ejecutan solo con cambios *puros* (primitivos o referencia de objeto).
        * Ventaja: Muy eficientes 🚀.
    * Pipes Impuros 🔥 (`pure: false`):
        * Se ejecutan en *cada* ciclo de detección de cambios.
        * Uso: Necesarios para cambios internos de objetos/arrays (sin cambio de referencia) o estado interno (ej: `AsyncPipe`, `JsonPipe`).
         Precaución: ⚠️ ¡Pueden impactar el rendimiento! Usar con moderación.

4. Ejemplo Completo 🧪:

// en tu componente.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Para pipes built-in
import { TruncatePipe } from './truncate.pipe'; // Custom pipe
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-pipe-demo',
  standalone: true,
  imports: [CommonModule, TruncatePipe], // <-- Importados aquí
  template: `
    <h2>Demostración de Pipes 🧪</h2>

    <p>📅 Fecha actual (completa): {{ ahora | date:'fullDate' }}</p>
    <p>📅 Fecha actual (corta): {{ ahora | date:'short' }}</p>

    <p>📖 Título Original: {{ libro.titulo }}</p>
    <p>🅰️ Título en Mayúsculas: {{ libro.titulo | uppercase }}</p>
    <p>✂️ Título Truncado: {{ libro.titulo | truncate:15:'...' }}</p> <!-- Custom pipe -->

    <p>💰 Precio: {{ libro.precio | currency:'EUR':'symbol':'1.2-2' }}</p>
    <p>% Descuento: {{ libro.descuento | percent:'1.0-0' }}</p>

    <p>{} Descripción (JSON Debug):</p>
    <pre>{{ libro | json }}</pre>

    <p>✂️ Tags (Primeros 2):</p>
    <ul>
      <li *ngFor="let tag of libro.tags | slice:0:2">{{ tag | titlecase }}</li>
    </ul>

    <p>⏳ Contador (Async Pipe): {{ contador$ | async }}</p>
  `
})
export class PipeDemoComponent {
  ahora: Date = new Date();
  libro = { /* ... datos del libro ... */ };
  contador$: Observable<number> = interval(1000).pipe(map(i => i * 2));
}

5. Buenas Prácticas y Consideraciones Adicionales 👍:

*
* ✨ Prioriza Pipes Puros: Mejor rendimiento.
* ✨ Evita Lógica Compleja en Pipes: Mantenlos simples y enfocados.
* ✨ Reutilización: Crea Custom Pipes para lógica repetida.
* ✨ No Abuses del Encadenamiento: Puede reducir legibilidad.
* ✨ Cuidado con Pipes Impuros y *ngFor: Considera trackBy.
* 🌐 Internacionalización (i18n): Configura LOCALE_ID para DatePipe, CurrencyPipe, etc.

👨‍🏫 ¡Revisa los Pipes built-in antes de crear uno! ¡Y prueba tus creaciones! 🧪

6. Resumen / Puntos Clave para el Repaso 📌:

✅ Pipes: Transforman datos en plantillas (@Pipe, PipeTransform).
✅ Propósito: Formateo, legibilidad, reutilización, separación.
✅ Sintaxis: {{ valor | nombrePipe:arg1 }}. Encadenables (| pipe1 | pipe2).
✅ Built-in: Date, Upper/Lower/TitleCase, number, Currency, Percent, Json, Slice, KeyValue, Async.
✅ Custom Pipes: ng g p nombre, implementa transform(), importa/declara.
✅ Puros (💧) vs. Impuros (🔥): Puros más eficientes, Impuros para casos específicos (¡cuidado!).

7. Preguntas de Autoevaluación 🤔:

❓ ¿Cuál es el beneficio principal de usar Pipes sobre métodos de componente para formato?
❓ Sintaxis para DatePipe con formato 'dd-MMM-yyyy'.
❓ ¿Qué significa "Pipe puro" y por qué importa?
❓ ¿Cuándo usarías AsyncPipe?
❓ Pasos para crear un Pipe addPrefix que añada "PRE:" a un string.

Expresiones Regulares (RegEx): Guía Esencial para Desarrolladores - Nota de Repaso

Cristian Arieta — Sat, 05 Apr 2025 17:39:59 +0000

1. Introducción y Objetivos de Aprendizaje:

¡Bienvenidos al fascinante mundo de las Expresiones Regulares! Piensen en ellas como un "lenguaje" súper compacto y especializado para buscar, encontrar y manipular patrones dentro de texto. Desde validar un correo electrónico hasta extraer datos específicos de archivos de log gigantescos, las RegEx son una habilidad fundamental en la caja de herramientas de cualquier desarrollador.
En la práctica, las RegEx son indispensables. Son soportadas por casi todos los lenguajes de programación modernos y herramientas de línea de comandos. Dominarlas no solo ahorra incontables líneas de código manual para el procesamiento de cadenas, sino que también permite realizar tareas complejas de forma eficiente. Sin embargo, su sintaxis concisa puede ser críptica; la clave es entender sus componentes fundamentales y construir patrones paso a paso.
(Nota de Repaso): Al finalizar esta nota, usted podrá:
- Definir qué es una Expresión Regular y su propósito principal.
- Identificar y comprender los metacaracteres y cuantificadores básicos.
- Utilizar clases de caracteres y anclas para refinar búsquedas.
- Construir patrones simples para validación y búsqueda en JavaScript.
- Reconocer los casos de uso más comunes de las RegEx.

2. Conceptos Fundamentales (Definiciones Clave):

Expresión Regular (RegEx / RegExp): Una secuencia de caracteres que define un patrón de búsqueda.
Motor de RegEx: El software que interpreta el patrón de RegEx y lo aplica sobre un texto (string) para encontrar coincidencias.
Literal: Un carácter en la RegEx que se corresponde consigo mismo en el texto (ej: a busca la letra 'a').
Metacarácter: Carácter con un significado especial en el contexto de una RegEx (ej: . que significa "cualquier carácter excepto nueva línea"). Necesitan ser "escapados" con una barra invertida (\) si quieres buscar el carácter literal (ej: \. busca un punto literal).
Coincidencia (Match): El fragmento de texto que cumple con el patrón definido por la RegEx.
Flags (Banderas): Modificadores que cambian el comportamiento de la búsqueda (ej: i para ignorar mayúsculas/minúsculas, g para búsqueda global - encontrar todas las coincidencias, no solo la primera).

3. Desarrollo del Tema: Construyendo Patrones RegEx

Pensemos en construir una RegEx como armar una descripción muy precisa de lo que buscamos. Usamos bloques de construcción (caracteres y metacaracteres) para definir ese patrón.
La potencia reside en combinar estos elementos. Aquí los componentes esenciales:
- Literales: abc busca la secuencia exacta "abc".
- Metacaracteres Comunes:
  - . (Punto): Cualquier carácter excepto salto de línea.
  - \ (Barra invertida): Escapa un metacarácter para tratarlo como literal (\., \*, \?) o da significado especial a caracteres normales (\d, \s, \w).
  - | (Barra vertical / Pipe): Actúa como un "OR" lógico. a|b busca 'a' o 'b'.
- Clases de Caracteres [...]: Definen un conjunto de caracteres posibles.
  - [aeiou] : Busca cualquier vocal minúscula.
  - [a-zA-Z0-9] : Busca cualquier letra (mayúscula o minúscula) o dígito.
  - [^0-9] (con ^ dentro de corchetes): Busca cualquier carácter que NO sea un dígito (clase negada).
- Clases Predefinidas (Atajos):
  - \d: Cualquier dígito (equivalente a [0-9]).
  - \D: Cualquier carácter que NO sea un dígito ([^0-9]).
  - \w: Cualquier carácter de "palabra" (alfanumérico + guion bajo: [a-zA-Z0-9_]).
  - \W: Cualquier carácter que NO sea de palabra ([^a-zA-Z0-9_]).
  - \s: Cualquier carácter de espacio en blanco (espacio, tabulador, salto de línea, etc.).
  - \S: Cualquier carácter que NO sea espacio en blanco.
- Cuantificadores (Repetición): Se aplican al carácter o grupo anterior.
  - *: Cero o más veces. a* busca "", "a", "aa", "aaa", etc.
  - +: Una o más veces. a+ busca "a", "aa", "aaa", etc. (pero no "").
  - ?: Cero o una vez (opcional). colou?r busca "color" o "colour".
  - {n}: Exactamente n veces. \d{3} busca exactamente tres dígitos.
  - {n,}: Al menos n veces. \d{2,} busca dos o más dígitos.
  - {n,m}: Entre n y m veces (inclusive). \d{2,4} busca de dos a cuatro dígitos.
  - Codiciosos (Greedy) vs. Perezosos (Lazy): Por defecto, los cuantificadores son "codiciosos" (intentan abarcar lo máximo posible). Añadiendo ? después del cuantificador los vuelve "perezosos" (abarcan lo mínimo). .* vs .*?
- Anclas (Posición): No buscan caracteres, sino posiciones en el texto.
  - ^: Inicio de la cadena (o línea, con flag m). ^abc busca "abc" solo si está al principio.
  - $: Fin de la cadena (o línea, con flag m). xyz$ busca "xyz" solo si está al final.
  - \b: Límite de palabra (word boundary). Posición entre un \w y un \W, o inicio/fin de cadena si el primer/último carácter es \w. \bword\b busca la palabra "word" completa, no como parte de "swordfish".
  - \B: Posición que NO es un límite de palabra.
- Grupos (...):
  - Agrupan partes del patrón: (abc)+ busca "abc", "abcabc", etc.
  - Capturan el texto coincidente: Permiten extraer sub-partes de la coincidencia total.
  - Grupo no capturador: (?:...). Agrupa pero no captura (más eficiente si no necesitas la captura).
(Nota de Repaso): La estructura básica es: Caracteres + Cuantificadores + Anclas. Usa [] para conjuntos, () para agrupar/capturar, y </code> para escapar o usar clases predefinidas.

4. Ejemplo Práctico (Validación de Email Simple en JavaScript)

Vamos a crear una RegEx para validar un formato de email muy básico. No será perfecta (la validación real de emails es muy compleja), pero ilustrará los conceptos. Queremos algo como: nombre@dominio.ext

Un patrón podría ser: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

// Patrón RegEx para una validación simple de email
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// Explicación del patrón:
// ^                     -> Inicio de la cadena
// [a-zA-Z0-9._%+-]+   -> Parte del nombre (antes del @):
//    [a-zA-Z0-9._%+-] -> Permite letras, números, y los caracteres ., _, %, +, -
//    +                 -> Debe haber uno o más de estos caracteres
// @                     -> El carácter literal '@'
// [a-zA-Z0-9.-]+      -> Parte del dominio (después del @, antes del último .):
//    [a-zA-Z0-9.-]    -> Permite letras, números, puntos y guiones
//    +                 -> Debe haber uno o más
// \.                    -> El carácter literal '.' (escapado porque '.' es metacarácter)
// [a-zA-Z]{2,}         -> Extensión del dominio (después del último .):
//    [a-zA-Z]          -> Solo letras
//    {2,}              -> Debe haber al menos 2 letras (ej: com, org, uk, io)
// $                     -> Fin de la cadena

// Cómo usarlo en JavaScript:
const email1 = "test.user+alias@example-domain.com";
const email2 = "invalid-email@";
const email3 = "another@domain.c"; // Extensión muy corta
const email4 = " user@domain.com"; // Espacio al inicio

console.log(`"${email1}" es válido? ${emailRegex.test(email1)}`); // true
console.log(`"${email2}" es válido? ${emailRegex.test(email2)}`); // false
console.log(`"${email3}" es válido? ${emailRegex.test(email3)}`); // false
console.log(`"${email4}" es válido? ${emailRegex.test(email4)}`); // false (por el espacio y ^)

// Otros métodos útiles:
// const matchResult = email1.match(emailRegex); // Devuelve detalles de la coincidencia o null
// const replacedString = email1.replace(/@.*/, '@new-domain.net'); // Reemplazar partes

5. Buenas Prácticas y Consideraciones Adicionales:

*
* Especificidad: Sé tan específico como sea posible. .* es potente pero a menudo demasiado amplio y puede llevar a coincidencias inesperadas y problemas de rendimiento (backtracking catastrófico).
* Legibilidad: Las RegEx complejas son difíciles de leer. Coméntalas exhaustivamente o divídelas en partes más pequeñas si es posible. Usa el flag x (comentarios y espacios en blanco ignorados) si tu motor lo soporta.
* Testing: Prueba tus RegEx con una variedad de casos válidos e inválidos. Usa herramientas online como Regex101, RegExr, o las herramientas de desarrollo de tu navegador.
* Performance: Sé consciente del backtracking. Patrones anidados con cuantificadores * o + pueden ser muy lentos en ciertos casos. Usa grupos no capturadores (?:...) si no necesitas la captura.
* Escapado: Recuerda escapar los metacaracteres (., ?, *, +, (, ), [, ], {, }, ^, $, \, |) si quieres buscar el carácter literal.

Empieza simple y añade complejidad gradualmente. No intentes crear el patrón perfecto de una sola vez. ¡La práctica y las herramientas de prueba son tus mejores aliados!
(Nota de Repaso):
- Do: Testear, comentar, ser específico, escapar metacaracteres, empezar simple.
- Don't: Usar .* sin cuidado, crear patrones innecesariamente complejos sin comentarios, olvidar las anclas ^ y $ para validaciones completas de cadenas.

6. Resumen / Puntos Clave para el Repaso:

RegEx: Patrones para buscar/manipular texto.
Bloques Básicos: Literales, Metacaracteres (. \ |), Clases ([] \d \w \s), Cuantificadores (* + ? {n,m}), Anclas (^ $ \b), Grupos (()).
Uso Común en JS: /patron/flags, método .test(), .match(), .replace(), .search().
Flags Clave: i (insensible a mayús/minús), g (global).
Clave del Éxito: ¡Práctica y Testing!

7. Preguntas de Autoevaluación:

¿Qué buscaría la expresión regular /gato|perro/i?
¿Cuál es la diferencia entre *, + y ? como cuantificadores?
¿Para qué sirven las anclas ^ y $ en una expresión regular utilizada para validar una entrada completa de usuario?
¿Cómo buscarías un punto literal (.) en un texto usando RegEx?

Espero que esta guía te resulte útil para entender y repasar las expresiones regulares.

Funciones Recursivas en JavaScript: Modificando Datos Anidados por ID - Guía Práctica

Cristian Arieta — Sat, 05 Apr 2025 17:27:35 +0000

1. Introducción y Objetivos de Aprendizaje:

(Nota de Repaso): Al finalizar esta nota, usted podrá:
- Definir qué es una función recursiva y sus componentes (caso base, paso recursivo).
- Identificar por qué la recursión es adecuada para estructuras de datos anidadas.
- Implementar una función recursiva para buscar un elemento por ID en un objeto/array anidado.
- Modificar un campo específico del elemento encontrado de forma inmutable (buenas prácticas).

2. Conceptos Fundamentales (Definiciones Clave):

Recursión: Técnica de programación donde una función se llama a sí misma para resolver una versión más pequeña del problema original.
Caso Base: Condición dentro de una función recursiva que detiene las llamadas sucesivas a sí misma. Es crucial para evitar un desbordamiento de pila (stack overflow). Generalmente, representa el caso más simple del problema que se puede resolver directamente.
Paso Recursivo: La parte de la función donde se llama a sí misma, pero típicamente con datos modificados que se acercan al caso base.
Estructura de Datos Anidada: Una colección de datos donde los elementos pueden contener otras colecciones (ej: un objeto con propiedades que son otros objetos o arrays, que a su vez pueden contener más).
Inmutabilidad: Práctica de no modificar los datos originales. En su lugar, se crean copias modificadas. Esto mejora la predictibilidad y facilita el debugging.

3. Desarrollo del Tema: Navegación y Modificación Recursiva

Imaginen que tenemos una caja que puede contener objetos o más cajas. Queremos encontrar un objeto específico (marcado con una etiqueta, nuestro ID) dentro de cualquier caja, sin importar cuán adentro esté, y cambiarle algo. La recursión nos permite "abrir" cada caja:
1. ¿Es esta caja el objeto que busco? (Verificar ID). Si sí, ¡lo encontré! Lo modifico y termino. (Parte del Caso Base)
2. ¿Esta caja está vacía o no contiene más cajas/objetos? Si sí, no hay nada más que hacer aquí. (Otro Caso Base)
3. Si no es el objeto buscado y contiene más cosas (otras cajas/objetos), repito el proceso (llamo a la misma función) para cada una de las cosas que hay dentro. (Paso Recursivo)
El desafío técnico está en manejar correctamente los diferentes tipos de "contenedores" (principalmente objetos y arrays en JavaScript) y en cómo propagar la modificación hacia arriba una vez que se encuentra el elemento. Para la búsqueda, iteramos sobre las propiedades de un objeto o los elementos de un array. Si el elemento actual coincide con el ID, realizamos la modificación. Si no, y si el elemento actual es a su vez un objeto o array, llamamos recursivamente a nuestra función sobre ese elemento. Es fundamental manejar la inmutabilidad: en lugar de modificar el objeto/array original, creamos uno nuevo con los cambios. Esto se logra típicamente con Object.assign(), el operador spread (...), o métodos como .map() para arrays. La función debe devolver la estructura (potencialmente modificada).
- Lógica Central:
  1. Chequeo Inicial (Caso Base Parcial): ¿Es el nodo actual null o no es un objeto/array? Si es así, no podemos buscar dentro, retornamos el nodo tal cual.
  2. Chequeo de ID (Caso Base Principal): ¿Tiene el nodo actual el targetId buscado?
    - Si sí: Crea una copia del nodo, modifica el campo deseado en la copia y retorna la copia. ¡Éxito!
    - Si no: Proceder al paso recursivo.
  3. Paso Recursivo (Manejo de Tipos):
    - Si el nodo es un Array: Itera sobre cada elemento. Llama recursivamente a la función con cada elemento. Construye un nuevo array con los resultados de estas llamadas recursivas (usando .map() es ideal para inmutabilidad). Retorna el nuevo array.
    - Si el nodo es un Objeto (y no un array): Itera sobre las claves (Object.keys()). Llama recursivamente a la función con el valor de cada propiedad. Construye un nuevo objeto acumulando los resultados. Retorna el nuevo objeto.
(Nota de Repaso): La clave es verificar el ID en el nivel actual. Si no coincide, delegar la búsqueda a los hijos (elementos de array o valores de propiedades de objeto) llamando a la misma función sobre ellos. Siempre construir y retornar nuevas estructuras (arrays/objetos) para mantener la inmutabilidad.

4. Ejemplo Práctico (JavaScript)

/**
 * Busca recursivamente un item por ID en una estructura anidada
 * y actualiza un campo específico de forma inmutable.
 *
 * @param {object|array} data La estructura de datos donde buscar.
 * @param {string|number} targetId El ID del item a buscar.
 * @param {string} fieldToUpdate El nombre del campo a modificar en el item encontrado.
 * @param {*} newValue El nuevo valor para el campo.
 * @returns {object|array} La nueva estructura de datos con el item modificado (o la original si no se encontró).
 */
function updateNestedItemById(data, targetId, fieldToUpdate, newValue) {
    // Caso Base 1: Si no es objeto/array, no podemos buscar dentro.
    if (typeof data !== 'object' || data === null) {
        return data;
    }

    // Si es un Array: Procesar cada elemento recursivamente
    if (Array.isArray(data)) {
        // Usamos map para crear un NUEVO array con los resultados
        return data.map(item => updateNestedItemById(item, targetId, fieldToUpdate, newValue));
    }

    // Si es un Objeto:
    // Caso Base 2: ¿Es este el objeto que buscamos?
    if (data.id === targetId) {
        // ¡Encontrado! Crear copia y modificar el campo especificado.
        console.log(`-- Encontrado item con ID: ${targetId}. Actualizando campo '${fieldToUpdate}'.`);
        return {
            ...data, // Copia inmutable de las propiedades existentes
            [fieldToUpdate]: newValue // Actualiza/añade el campo específico
        };
    }

    // Paso Recursivo para Objetos: Procesar cada propiedad recursivamente
    const updatedObject = {}; // Empezar con un objeto vacío para la nueva versión
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            // Llamada recursiva para el valor de la propiedad
            updatedObject[key] = updateNestedItemById(data[key], targetId, fieldToUpdate, newValue);
        }
    }
    return updatedObject; // Retornar el nuevo objeto construido
}

// --- Ejemplo de Uso ---
const initialData = [
    { id: 1, name: "Root", children: [
        { id: 11, name: "Child 1", status: "active", children: [] },
        { id: 12, name: "Child 2", status: "pending", children: [
            { id: 121, name: "Grandchild 2.1", status: "active" }
        ]}
    ]},
    { id: 2, name: "Another Root", status: "inactive" }
];

console.log("Datos Iniciales:", JSON.stringify(initialData, null, 2));

// Modificar el status del item con id 12 a 'completed'
const targetIdToUpdate = 12;
const field = 'status';
const value = 'completed';

const updatedData = updateNestedItemById(initialData, targetIdToUpdate, field, value);

console.log("\nDatos Actualizados:", JSON.stringify(updatedData, null, 2));

// Verificar que el original no cambió (si hicimos bien la inmutabilidad)
console.log("\nDatos Originales (sin cambios):", JSON.stringify(initialData, null, 2));

// Intentar actualizar un ID que no existe
const nonExistentUpdate = updateNestedItemById(initialData, 999, 'status', 'failed');
// Debería ser igual a initialData
// console.log("\nIntento con ID no existente:", JSON.stringify(nonExistentUpdate, null, 2));

5. Buenas Prácticas y Consideraciones Adicionales:

*   **Inmutabilidad:** Como se demostró, usar `map` para arrays y crear nuevos objetos con el operador spread (`...`) o `Object.assign()` es crucial para evitar efectos secundarios inesperados.
*   **Stack Overflow:** Con estructuras *extremadamente* profundas, la recursión puede exceder el límite de la pila de llamadas. En esos casos (raros en datos JSON típicos, pero posibles), se podría considerar una solución iterativa usando una pila manual.
*   **Performance:** Para estructuras gigantescas, la creación constante de nuevos objetos/arrays puede tener un impacto en la memoria/rendimiento. Evaluar si es un problema real antes de optimizar prematuramente. Librerías como Immer.js pueden ayudar a manejar la inmutabilidad de forma más eficiente.
*   **Complejidad del Objeto:** El ejemplo asume que el ID está en una propiedad llamada `id`. La función podría hacerse más flexible para aceptar una función `finder` o el nombre de la propiedad ID.

¡No olvides el caso base! Sin él, tu función recursiva correrá indefinidamente (o hasta que la pila se desborde). Asegúrate de manejar tanto objetos como arrays correctamente en tu paso recursivo.
(Nota de Repaso):
- Do: Tener un caso base claro para detener la recursión. Manejar objetos y arrays. Priorizar la inmutabilidad (crear copias).
- Don't: Olvidar el caso base. Modificar los datos originales directamente (mutación). Usar recursión si un simple bucle es suficiente (para estructuras planas).

6. Resumen / Puntos Clave para el Repaso:

Recursión: Función que se llama a sí misma.
Componentes: Caso Base (detiene) y Paso Recursivo (continúa con subproblema).
Aplicación: Ideal para estructuras anidadas (objetos/arrays dentro de otros).
Proceso:
1. Verificar ID en el nodo actual (si aplica).
2. Si es el nodo, copiar y modificar.
3. Si no es el nodo, llamar recursivamente a la función para cada hijo/propiedad.
4. Construir la nueva estructura (array/objeto) con los resultados de las llamadas recursivas.
Inmutabilidad: Esencial para código predecible; crear copias en lugar de modificar originales.

7. Preguntas de Autoevaluación:

¿Cuál es el propósito principal del "caso base" en una función recursiva?
En el ejemplo de código, ¿cómo se asegura la inmutabilidad al procesar un array? ¿Y al procesar un objeto que no es el objetivo?
¿Qué pasaría si la función updateNestedItemById no retornara nada en el paso recursivo (cuando procesa hijos)?

Espero que este artículo detallado te sirva como una excelente guía y nota de repaso sobre cómo usar la recursión para esta tarea específica. ¡Avísame si quieres explorar otro tema!

📘 Clase `Num` en TypeScript 🤓

Cristian Arieta — Fri, 04 Apr 2025 21:12:06 +0000

🧱 ¿Qué es una clase `Num`?

Una clase Num (o Numero) no es parte de Angular ni de TypeScript por defecto, pero tú puedes crearla como una estructura personalizada para manejar números con ciertas operaciones u objetos más estructurados.

Se utiliza cuando quieres encapsular propiedades, validaciones, y métodos matemáticos que trabajan alrededor de un número.

🔨 Ejemplo base de una clase `Num`

class Num {
  private valor: number;

  constructor(valor: number) {
    this.valor = valor;
  }

  getValue(): number {
    return this.valor;
  }

  isEven(): boolean {
    return this.valor % 2 === 0;
  }

  double(): number {
    return this.valor * 2;
  }

  toString(): string {
    return `📦 Valor actual: ${this.valor}`;
  }
}

✅ Uso de la clase `Num`

const miNumero = new Num(6);

console.log(miNumero.getValue()); // 6
console.log("¿Es par?", miNumero.isEven()); // true
console.log("Doble:", miNumero.double()); // 12
console.log(miNumero.toString()); // 📦 Valor actual: 6

🎯 ¿Para qué sirve crear una clase `Num`?

✅ Para encapsular reglas o validaciones personalizadas
🧪 Para tener lógica reutilizable sobre números (sumar, restar, convertir, validar)
📦 Para trabajar en proyectos grandes donde un simple number ya no es suficiente
🧠 Para aprender los principios POO (Programación Orientada a Objetos)

💡 Ejemplo avanzado: clase `Num` con operaciones matemáticas

class Num {
  constructor(private valor: number) {}

  suma(n: number): Num {
    return new Num(this.valor + n);
  }

  resta(n: number): Num {
    return new Num(this.valor - n);
  }

  multiplica(n: number): Num {
    return new Num(this.valor * n);
  }

  divide(n: number): Num {
    if (n === 0) throw new Error("❌ División por cero no permitida");
    return new Num(this.valor / n);
  }

  esPositivo(): boolean {
    return this.valor > 0;
  }

  imprimir(): void {
    console.log(`📦 Valor: ${this.valor}`);
  }
}

🧪 Uso:

const numero = new Num(10);
numero.imprimir(); // 📦 Valor: 10

const resultado = numero.suma(5).multiplica(2); // (10 + 5) * 2 = 30
resultado.imprimir(); // 📦 Valor: 30

console.log("¿Es positivo?", resultado.esPositivo()); // true

🧙‍♂️ Ventajas de usar esta clase `Num`

Ventaja	¿Por qué importa?
Encapsulamiento	Protege y controla el acceso al valor
Métodos encadenables	Permite operaciones más limpias y elegantes
Validación centralizada	Puedes agregar reglas como "no dividir entre 0"
Reutilización	Puedes usar `Num` en varios proyectos o módulos

📌 Detalles técnicos

✅ Puedes usar private para evitar que otros modifiquen el número directamente
✅ Puedes extender Num para crear por ejemplo Porcentaje extends Num
✅ Puedes sobreescribir el método toString() para imprimir bonito

🧁 Postre final: Mini práctica para ti


ts
// Crea una clase Num que tenga:
// - una propiedad valor (número)
// - un método cuadrado()
// - un método raiz()
// - un método negativo()
// - un método mostrar()


---

¿Qué es el tipado en TypeScript?

Cristian Arieta — Fri, 04 Apr 2025 21:04:33 +0000

Vamos a aprender todos los tipos (tipados) que existen en TypeScript, con su explicación y un ejemplo por cada uno.

Prepárate, que esto va cargado de conocimiento y emojis 😄📚

TypeScript es un superset de JavaScript que añade tipos estáticos.

Eso significa que puedes decirle al código qué tipo de dato debe tener una variable, y así evitar errores antes de que el programa corra. ✅❌

🗂️ Tipos primitivos (los básicos)

1️⃣ `string` – Cadenas de texto

let nombre: string = 'Cristian Zayas';

🗣️ Sirve para cualquier texto entre comillas.

2️⃣ `number` – Números (enteros y decimales)

let edad: number = 30;
let temperatura: number = 36.6;

🧮 Nada de int o float, aquí todo es number.

3️⃣ `boolean` – Verdadero o falso

let estaActivo: boolean = true;

🔘 Útil para condiciones, estados y validaciones.

4️⃣ `null` – Valor nulo (ausente intencionalmente)

let resultado: null = null;

🚫 Ideal para indicar que algo no tiene valor.

5️⃣ `undefined` – Aún no se ha definido

let mensaje: undefined = undefined;

📦 Se usa cuando no se ha asignado valor todavía.

6️⃣ `symbol` – Valor único e inmutable

let id: symbol = Symbol('id');

🔐 Útil en estructuras muy avanzadas o bibliotecas.

7️⃣ `bigint` – Números grandes

let numeroGrande: bigint = 9007199254740991n;

📏 Para cálculos de números gigantes que sobrepasan los límites de number.

🧺 Tipos estructurados

8️⃣ `array` – Arreglos

let frutas: string[] = ['Manzana', 'Banana', 'Mango'];

📚 También se puede usar Array<string>.

9️⃣ `tuple` – Arreglos con tipos fijos

let coordenada: [number, number] = [10, 20];

📌 Útil para valores en par (como coordenadas, RGB, etc.)

🔟 `object` – Objetos con propiedades

let persona: { nombre: string; edad: number } = {
  nombre: 'Ana',
  edad: 28
};

📦 Puedes crear interfaces para reutilizar:

interface Usuario {
  nombre: string;
  correo: string;
}

let user: Usuario = { nombre: 'Zayas', correo: 'zayas@mail.com' };

🧩 Tipos especiales

1️⃣1️⃣ `any` – Cualquier tipo (pierdes seguridad de tipos)

let variable: any = 5;
variable = 'ahora soy texto';

⚠️ Úsalo solo cuando no hay otra opción.

1️⃣2️⃣ `unknown` – Tipo desconocido, pero más seguro que `any`

let dato: unknown = 'hola';
// dato.toUpperCase(); ❌ Error
if (typeof dato === 'string') {
  console.log(dato.toUpperCase()); // ✅
}

🔐 Obliga a verificar el tipo antes de usarlo.

1️⃣3️⃣ `void` – No devuelve nada (funciones sin retorno)

function saludar(): void {
  console.log('Hola dev 👋');
}

🫙 Se usa para funciones que solo ejecutan, no retornan.

1️⃣4️⃣ `never` – Nunca retorna (errores, bucles infinitos)

function error(): never {
  throw new Error('¡Algo salió mal!');
}

🚫 Ideal para funciones que nunca terminan correctamente.

💥 Tipos combinados

1️⃣5️⃣ Union types – Uno u otro

let valor: string | number = 'Hola';
valor = 100; // también válido

⚔️ Muy útil para parámetros que aceptan más de un tipo.

1️⃣6️⃣ Literal types – Valores específicos

let direccion: 'izquierda' | 'derecha' = 'izquierda';

📍 Útil cuando solo se permiten ciertos valores.

1️⃣7️⃣ Type alias – Alias de tipos

type ID = string | number;
let usuarioID: ID = 123;

📦 Reutiliza estructuras complejas con nombres sencillos.

1️⃣8️⃣ Enum – Enumeraciones (grupos de valores constantes)

enum Rol {
  Admin,
  Usuario,
  Invitado
}

let rolActual: Rol = Rol.Admin;

🧭 Ideal para estados, roles, opciones predefinidas.

🧠 Resumen en tabla

Tipo	Descripción	Ejemplo
`string`	Texto	`'Hola'`
`number`	Número	`42`
`boolean`	Verdadero o falso	`true`
`null`	Valor nulo	`null`
`undefined`	No definido	`undefined`
`symbol`	Identificador único	`Symbol('id')`
`bigint`	Números grandes	`1234567890123456789n`
`array`	Lista de valores	`[1, 2, 3]`
`tuple`	Lista con tipos específicos	`[true, 'hola']`
`object`	Estructura con propiedades	`{ nombre: 'Zayas' }`
`any`	Puede ser cualquier tipo	`'texto'`, `42`, etc.
`unknown`	Similar a `any` pero más seguro	`let x: unknown = true;`
`void`	Sin valor de retorno	`function hola(): void {}`
`never`	Nunca retorna	`function crash(): never {}`
`union`	Puede ser uno u otro	`string
{% raw %}`literal`	Solo acepta valores específicos	`'ON'
{% raw %}`type alias`	Tipo con nombre personalizado	`type ID = string
{% raw %}`enum`	Conjunto de valores nombrados	`enum Color { Rojo, Azul }`

🧪 ¿Listo para practicar?

¿Qué tipo sería ideal para representar:

let estado = 'activo'; // solo puede ser 'activo' o 'inactivo'

✅ R: Un literal type:

let estado: 'activo' | 'inactivo' = 'activo';

🎯 Las validaciones ternarias en TypeScript (y también en HTML con Angular)

Cristian Arieta — Fri, 04 Apr 2025 21:00:02 +0000

Hoy vamos a hablar de un tema que suena complicado pero es súper útil y elegante:

🧠 ¿Qué es una validación ternaria?

La validación ternaria (o operador ternario) es como un "if" en una sola línea.

📚 Su estructura es:

condición ? valorSiEsVerdadero : valorSiEsFalso;

Es como decir:

“Si esto es verdadero, haz esto; si no, haz lo otro” — ¡pero todo en una línea! 🎩

🧪 Ejemplo básico en TypeScript

const edad = 20;
const mensaje = edad >= 18 ? 'Eres mayor de edad 🧔' : 'Eres menor de edad 👶';
console.log(mensaje); // Eres mayor de edad 🧔

👉 Lo mismo con if sería:

let mensaje = '';
if (edad >= 18) {
  mensaje = 'Eres mayor de edad 🧔';
} else {
  mensaje = 'Eres menor de edad 👶';
}

🧼 ¿Ves la diferencia? El operador ternario es más limpio, directo y legible cuando son decisiones cortas.

🧩 ¿Y en Angular HTML con `*ngIf` o atributos?

También puedes usarlo directamente en la plantilla HTML, por ejemplo:

<p [style.color]="isError ? 'red' : 'green'">
  {{ isError ? '¡Ups, error!' : 'Todo bien 👍' }}
</p>

🧪 Otro ejemplo: mostrar íconos según estado

<fa-icon [icon]="isOnline ? 'wifi' : 'wifi-slash'"></fa-icon>

Esto cambia el ícono dependiendo si isOnline es true o false.

⚠️ Cuándo NO usar ternarias

Evita ternarias cuando la lógica se complica mucho o hay varios niveles anidados 😵‍💫:

❌ Mal uso:

const mensaje = a > 10 
  ? b > 5 
    ? 'Alto y bien' 
    : 'Alto pero mal' 
  : 'Bajo';

En ese caso, es mejor usar if/else para mantenerlo claro.

✅ Cuándo SÍ usar ternarias

Mostrar mensajes cortos en función de una condición
Cambiar estilos dinámicos
Elegir entre dos valores
Dentro de interpolaciones en Angular

🧭 En resumen:

Parte	Descripción
`condición`	Se evalúa como `true` o `false`
`? valorSiTrue`	Se ejecuta si la condición es verdadera
`: valorSiFalse`	Se ejecuta si es falsa

🚀 Ejercicio Rápido

¿Qué muestra este código?

const nivel = 7;
const resultado = nivel > 5 ? '✅ Aprobado' : '❌ Reprobado';
console.log(resultado);

🧠 Piensa unos segundos...

¡Correcto! Muestra: ✅ Aprobado

🚀 ¡A Navegar con Bucles en Angular!

Cristian Arieta — Fri, 04 Apr 2025 20:52:47 +0000

Aprende a repetir elementos como todo un Capitán 🧑‍✈️⚓

Hola devs 👩‍💻👨‍💻, hoy vamos a abordar un tema súper útil en Angular: los bucles.

Así como un barco recorre el mar parando en varias islas 🏝️, los bucles recorren colecciones de datos, mostrando o procesando cada elemento.

Vamos a ver cómo se hace esto en Angular paso a paso, con ejemplos y emojis para no dormirnos 😴👉😄.

1️⃣ `*ngFor` en el HTML – El timón del barco 🚢

Imagina que tienes una lista de frutas tropicales 🍍🍌🥭 que quieres mostrar en pantalla. ¡Aquí entra *ngFor al rescate!

// archivo: frutas.component.ts
export class FrutasComponent {
  frutas: string[] = ['Piña 🍍', 'Banano 🍌', 'Mango 🥭'];
}

Y en el HTML:

<!-- archivo: frutas.component.html -->
<ul>
  <li *ngFor="let fruta of frutas">{{ fruta }}</li>
</ul>

📌 Explicación:

*ngFor recorre cada elemento de frutas.
let fruta of frutas crea una variable fruta por cada elemento.
{{ fruta }} lo muestra en pantalla.

🧠 ¡Fácil y limpio! Y se ve así:

- Piña 🍍
- Banano 🍌
- Mango 🥭

2️⃣ Bucles en TypeScript – Los motores del barco 🛠️

Ahora supongamos que quieres hacer algo con lógica, como filtrar frutas o convertirlas a mayúsculas.

🧪 Ejemplo con `for` tradicional:

for (let i = 0; i < this.frutas.length; i++) {
  console.log(`Fruta #${i + 1}: ${this.frutas[i]}`);
}

🧪 Ejemplo con `forEach`:

this.frutas.forEach((fruta, index) => {
  console.log(`Fruta ${index + 1}: ${fruta.toUpperCase()}`);
});

🧪 Ejemplo con `map` para transformar:

const frutasEnMayuscula = this.frutas.map(fruta => fruta.toUpperCase());
console.log(frutasEnMayuscula); // ['PIÑA 🍍', 'BANANO 🍌', 'MANGO 🥭']

3️⃣ Bonus: `ng-template` para más control 🧙‍♂️

Puedes usar ng-template si quieres mostrar un mensaje cuando no haya datos. Ejemplo:

<ul *ngIf="frutas.length > 0; else noHayFrutas">
  <li *ngFor="let fruta of frutas">{{ fruta }}</li>
</ul>

<ng-template #noHayFrutas>
  <p>No hay frutas para mostrar 🍽️</p>
</ng-template>

🧭 Resumen del Capitán

Herramienta	¿Para qué sirve?
`*ngFor`	Mostrar listas en HTML
`for`	Bucle clásico, útil para lógica más compleja
`forEach`	Recorre arrays, sin modificar
`map`	Transforma arrays y devuelve uno nuevo
`ng-template`	Muestra contenido alternativo (como un `else`)

🚀 ¡Zarpa y practica!

Los bucles son parte del alma de una app dinámica. Ya sea mostrando productos 🛍️, usuarios 👥 o posts 📝, sabrás cómo hacerlos navegar con estilo.

🚀 Virtual Scroll en Angular: ¡Carga listas infinitas sin perder rendimiento!

Cristian Arieta — Thu, 03 Apr 2025 17:38:00 +0000

🧐 ¿Qué es Virtual Scroll?

Virtual Scroll es una técnica de renderizado en la que solo se dibujan los elementos visibles en pantalla en lugar de cargar toda la lista en el DOM.

📌 Beneficios:

✅ Mejora el rendimiento en listas largas.

✅ Reduce el consumo de memoria y procesamiento.

✅ Hace que la interfaz sea más fluida y rápida.

🔥 Ejemplo clásico sin Virtual Scroll:

Si tienes una lista de 10,000 elementos, Angular los renderiza todos en el DOM, haciendo que la página se vuelva lenta y pesada.

💡 Con Virtual Scroll, solo se renderizan los elementos visibles en pantalla, cargando los demás dinámicamente a medida que el usuario se desplaza.

📌 ¿Cuándo usar Virtual Scroll?

🔹 Listas con muchos elementos (1000+).

🔹 Cuando el rendimiento se ve afectado por demasiados elementos en pantalla.

🔹 Cuando necesitas optimizar el uso de memoria y mejorar la UX.

🛠 Implementación de Virtual Scroll en Angular

Para usar Virtual Scroll en Angular, necesitamos Angular CDK (Component Dev Kit), que proporciona herramientas para mejorar la interfaz de usuario.

1️⃣ Instalar Angular CDK

Si aún no tienes instalado Angular CDK, agrégalo con este comando:

npm install @angular/cdk

2️⃣ Importar `ScrollingModule` en tu módulo

Abre el archivo app.module.ts e importa el módulo de desplazamiento:

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollingModule  // 📌 Importamos el módulo
  ],
})
export class AppModule { }

3️⃣ Crear una lista con Virtual Scroll

Ahora vamos a crear un componente con una lista de 10,000 elementos, pero solo renderizando los visibles.

📌 Código del componente (virtual-scroll.component.ts):

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

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 10000 }, (_, i) => `Elemento #${i}`);
}

📌 Código del HTML (virtual-scroll.component.html):

<cdk-virtual-scroll-viewport itemSize="50" class="scroll-container">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

🎯 Explicación:

✅ <cdk-virtual-scroll-viewport> → Define el área de desplazamiento virtual.

✅ itemSize="50" → Establece el tamaño de cada elemento en píxeles (ajústalo según el diseño).

✅ *cdkVirtualFor="let item of items" → Funciona igual que *ngFor, pero con Virtual Scroll.

📌 Código de estilos (virtual-scroll.component.css):

.scroll-container {
  height: 400px;  /* Altura fija del contenedor */
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
}

.item {
  height: 50px;  /* Debe coincidir con itemSize */
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

🎯 ¿Cómo funciona Virtual Scroll?

1️⃣ El usuario desplaza la lista.

2️⃣ Angular solo renderiza los elementos visibles en el viewport.

3️⃣ Los elementos que salen de la vista se eliminan del DOM, ahorrando memoria.

4️⃣ A medida que el usuario baja, se agregan nuevos elementos dinámicamente.

🔥 Mejoras avanzadas con Virtual Scroll

1️⃣ Usar Virtual Scroll con una API (datos dinámicos)

Si los datos provienen de una API, puedes combinarlos con Virtual Scroll para cargar información de forma eficiente.

Ejemplo con peticiones HTTP:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-virtual-scroll-api',
  templateUrl: './virtual-scroll-api.component.html',
  styleUrls: ['./virtual-scroll-api.component.css']
})
export class VirtualScrollApiComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
      .subscribe(data => {
        this.items = data;
      });
  }
}

📌 HTML para la API (virtual-scroll-api.component.html):

<cdk-virtual-scroll-viewport itemSize="50" class="scroll-container">
  <div *cdkVirtualFor="let item of items" class="item">
    <strong>{{ item.id }}</strong> - {{ item.title }}
  </div>
</cdk-virtual-scroll-viewport>

🔥 Beneficio:

En lugar de cargar todos los datos de la API en memoria, solo se renderizan los visibles.

📌 Diferencia entre Virtual Scroll y Paginación

Característica	Virtual Scroll	Paginación
🚀 Carga inicial	Solo elementos visibles	Página completa
📏 Uso de memoria	Optimizado	Puede ser alto
🔄 UX (experiencia de usuario)	Scroll fluido e infinito	Cambio de página manual
⚡ Mejor rendimiento en grandes listas	✅ Sí	❌ No tan eficiente

📌 ¿Cuándo usar cuál?

🔹 Usa Virtual Scroll cuando tienes grandes volúmenes de datos y necesitas fluidez en la navegación.

🔹 Usa Paginación cuando los datos vienen de una API con muchas páginas y necesitas un control más preciso.

🎯 Conclusión

🔹 Virtual Scroll es ideal para listas largas y mejora el rendimiento.

🔹 Usa cdk-virtual-scroll-viewport para implementar listas dinámicas.

🔹 Se combina bien con APIs para cargar datos de manera eficiente.

🔹 Es una alternativa a la paginación, dependiendo de la UX que necesites.

🎓 ¡Ahora es tu turno!

¿Qué opinas de Virtual Scroll? ¿Tienes dudas o quieres que veamos algún caso específico? ¡Estoy listo para ayudarte! 😃 🚀

🔥 ¿Cuándo se actualiza un componente con `OnPush`?

Cristian Arieta — Wed, 02 Apr 2025 17:26:00 +0000

Cuando un componente tiene OnPush, solo se actualizará si ocurre alguna de estas situaciones:

1️⃣ Cambio en un `@Input()`

Si el valor del @Input() cambia de referencia, Angular actualizará el componente.

✅ Se actualiza porque cambia la referencia (objeto nuevo)

this.producto = { nombre: 'Nuevo Producto' }; 
// Esto genera una nueva referencia en memoria

❌ No se actualiza si solo se modifica una propiedad interna

this.producto.nombre = 'Nuevo Producto';
// No cambia la referencia del objeto en memoria, Angular no lo detecta

💡 Solución: Para forzar la detección de cambios, asigna un nuevo objeto:

this.producto = { ...this.producto, nombre: 'Nuevo Producto' };

2️⃣ Eventos del DOM (click, input, etc.)

Si el componente tiene un evento como (click), (input), (change), etc., Angular detectará el cambio.

<button (click)="cambiarValor()">Actualizar</button>

cambiarValor() {
  this.valor = 'Nuevo';
}

Esto siempre actualizará la vista, incluso con OnPush.

3️⃣ Uso de `async` en un `| async` pipe (Observables)

Si usas el pipe async, Angular actualizará automáticamente el componente cuando el Observable emita un nuevo valor.

<p>{{ datos$ | async }}</p>

datos$ = this.http.get('https://api.example.com/data');

4️⃣ Cambios manuales con `markForCheck()`

Si necesitas actualizar manualmente el componente, puedes usar ChangeDetectorRef.markForCheck().

constructor(private cd: ChangeDetectorRef) {}

actualizar() {
  this.valor = 'Nuevo';
  this.cd.markForCheck(); // 🔥 Forzar actualización
}

5️⃣ Cambio en una variable dentro de un `setTimeout` o `setInterval`

Si modificamos una variable dentro de setTimeout, Angular no lo detectará a menos que usemos markForCheck().

❌ No se actualiza automáticamente

setTimeout(() => {
  this.valor = 'Nuevo';
}, 2000);

✅ Solución con markForCheck()

setTimeout(() => {
  this.valor = 'Nuevo';
  this.cd.markForCheck();
}, 2000);

6️⃣ Cambios después de una petición HTTP manual

Si asignamos un nuevo valor después de una petición HTTP sin async, Angular no lo detectará automáticamente.

❌ No se actualiza automáticamente

this.http.get('https://api.example.com/data').subscribe(data => {
  this.valor = data;
});

✅ Solución con markForCheck()

this.http.get('https://api.example.com/data').subscribe(data => {
  this.valor = data;
  this.cd.markForCheck();
});

7️⃣ Re-adjuntar la detección de cambios con `reattach()`

Si en algún momento se desactiva la detección de cambios con cd.detach(), podemos volver a activarla con reattach().

this.cd.detach(); // 🛑 Detiene la detección
this.cd.reattach(); // 🔄 Reactiva la detección

📌 Resumen final

Si un componente tiene OnPush, solo se actualizará cuando ocurra alguno de estos eventos:

Evento	¿Actualiza con `OnPush`?
Cambio en un `@Input()` (nueva referencia)	✅ Sí
Evento del DOM (`click`, `input`, etc.)	✅ Sí
`async` pipe con Observables	✅ Sí
Uso de `markForCheck()`	✅ Sí
`setTimeout` o `setInterval`	❌ No (a menos que uses `markForCheck()`)
HTTP Request (`subscribe()`)	❌ No (a menos que uses `markForCheck()`)
`detach()`	❌ No
`reattach()`	✅ Sí

🎯 Conclusión

🔹 OnPush mejora el rendimiento porque evita que Angular revise el componente en cada ciclo de cambio.

🔹 Sin embargo, sigue actualizándose en situaciones clave como cambios en @Input, eventos del DOM o usando markForCheck().

🔹 Si necesitas forzar un cambio manualmente, usa markForCheck() o detectChanges().

Ahora tienes el conocimiento completo sobre OnPush y cuándo se actualizan los componentes. 🚀🔥

🚀 Optimización y mejora de rendimiento en Angular con Change Detection y OnPush

Cristian Arieta — Tue, 01 Apr 2025 17:23:00 +0000

📌 Introducción: ¿Por qué es importante la optimización?

Cuando creamos aplicaciones en Angular, el rendimiento puede verse afectado si no manejamos correctamente el cambio de estado de los componentes. Esto se debe a que Angular revisa constantemente los cambios en la interfaz para actualizar el DOM de forma eficiente. Sin embargo, esta detección de cambios puede volverse costosa en términos de rendimiento si no la controlamos adecuadamente.

Aquí es donde entra en juego el Change Detection (Detección de Cambios) y, más específicamente, la estrategia OnPush.

🎯 Objetivo de este artículo: Entender cómo funciona el Change Detection en Angular y cómo podemos optimizar el rendimiento con OnPush.

🧐 ¿Qué es Change Detection en Angular?

Change Detection (Detección de Cambios) es el mecanismo que usa Angular para actualizar la interfaz de usuario cuando ocurre un cambio en el estado de la aplicación.

📌 Ejemplo básico

Cuando el usuario hace clic en un botón y cambia un valor, Angular detecta el cambio y actualiza el DOM:

<p>{{ contador }}</p>
<button (click)="incrementar()">Incrementar</button>

export class MiComponente {
  contador = 0;

  incrementar() {
    this.contador++;
  }
}

En este caso, Angular detecta el cambio en contador y actualiza la vista automáticamente.

🤔 ¿Pero cómo hace Angular para detectar los cambios?

🔍 Angular usa un proceso llamado Zone.js, que detecta eventos como:

✅ Eventos del usuario (clics, inputs, etc.)

✅ Llamadas a setTimeout o setInterval

✅ Peticiones HTTP

Cada vez que detecta un cambio, Angular verifica todos los componentes del árbol para ver si algo ha cambiado.

⚠️ Problema: Si tenemos muchos componentes y Angular revisa todos en cada cambio, ¡puede volverse lento!

🚀 ¿Cómo optimizamos Change Detection con OnPush?

Por defecto, Angular usa la estrategia ChangeDetectionStrategy.Default, lo que significa que verifica todos los componentes en cada cambio, sin importar si realmente han cambiado.

💡 Aquí es donde entra en juego OnPush

🛠️ Implementando OnPush en un Componente

Si queremos mejorar el rendimiento, podemos decirle a Angular:

"Solo verifica este componente si cambia una de sus entradas (@Input)"

Esto lo logramos con ChangeDetectionStrategy.OnPush:

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-mi-componente',
  template: `<p>{{ dato }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MiComponente {
  @Input() dato!: string;
}

📌 Ahora, este componente solo se actualizará cuando cambie su @Input y no en cada cambio global.

🛠️ Ejemplo práctico de OnPush en acción

Imagina que tenemos una lista de productos en una tienda:

<app-producto *ngFor="let p of productos" [producto]="p"></app-producto>

Y el componente ProductoComponent:

@Component({
  selector: 'app-producto',
  template: `<p>{{ producto.nombre }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductoComponent {
  @Input() producto!: { nombre: string };
}

🔍 Diferencias clave:

Estrategia Default	Estrategia OnPush
Angular revisa todos los componentes en cada cambio	Solo revisa el componente si cambia su `@Input`
Puede causar ralentizaciones en grandes aplicaciones	Mejora el rendimiento significativamente

🛠️ Cómo forzar detección de cambios con OnPush

Si usamos OnPush, Angular no actualizará el componente automáticamente a menos que cambie su @Input.

📌 ¿Pero qué pasa si queremos actualizarlo manualmente?

Podemos usar ChangeDetectorRef.markForCheck():

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

@Component({
  selector: 'app-mi-componente',
  template: `<p>{{ mensaje }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MiComponente {
  mensaje = 'Hola Mundo';

  constructor(private cd: ChangeDetectorRef) {}

  cambiarMensaje() {
    this.mensaje = 'Nuevo Mensaje';
    this.cd.markForCheck(); // 🔥 Forzar actualización
  }
}

✅ markForCheck() indica a Angular que verifique este componente en la próxima detección de cambios.

Si queremos detener la detección de cambios por completo, podemos usar detach():

this.cd.detach(); // 🛑 Detiene la detección de cambios

Para volver a activarla:

this.cd.reattach();

🎯 ¿Cuándo usar OnPush?

📌 Úsalo cuando...

✅ Tienes listas grandes de elementos en ngFor

✅ Quieres mejorar el rendimiento de componentes que no cambian frecuentemente

✅ Estás trabajando con datos que solo se actualizan desde el servidor

📌 No lo uses cuando...

❌ Necesitas detectar cambios en variables locales sin @Input

❌ Dependencias internas del componente cambian constantemente

🏁 Conclusión: ¡Optimiza tu Angular como un Pro!

💡 El sistema de detección de cambios de Angular es poderoso, pero puede ser costoso si no lo manejamos bien.

🚀 OnPush es la clave para mejorar el rendimiento en componentes que dependen de datos externos.

🔥 Recapitulación rápida:

✅ ChangeDetectionStrategy.Default revisa TODO en cada cambio 🔄

✅ ChangeDetectionStrategy.OnPush revisa SOLO cuando cambia un @Input 🚀

✅ Podemos forzar actualizaciones con markForCheck() 🔥

✅ Podemos detener detecciones con detach() 🛑

Ahora que lo sabes, ¡aplícalo y haz que tus aplicaciones sean rápidas como un rayo! ⚡🚀

¿Qué te pareció esta explicación? 🤔

Si tienes alguna duda o quieres más ejemplos, dime y seguimos aprendiendo juntos. ¡Nos vemos en el próximo artículo, Master! 😎🚀

🚀 Diferencias entre *ngIf y ngSwitch en Angular

Cristian Arieta — Tue, 01 Apr 2025 12:23:00 +0000

Cuando trabajamos con Angular en la capa de presentación (HTML), es común necesitar mostrar u ocultar elementos dinámicamente según una condición. Para esto, Angular nos proporciona dos estructuras de control poderosas: *ngIf y ngSwitch. Aunque ambas sirven para manejar la visualización condicional, tienen diferencias clave en su funcionamiento y en los escenarios donde se recomienda usar cada una.

🔍 1. ¿Qué es `*ngIf` y cómo funciona?

*ngIf es una directiva estructural que permite renderizar o eliminar elementos del DOM según una condición booleana. Si la condición es true, el elemento se muestra; si es false, el elemento se elimina completamente del DOM.

✅ Ejemplo de uso:

<div *ngIf="mostrarMensaje">
  <p>📢 Este mensaje se muestra si `mostrarMensaje` es verdadero.</p>
</div>

En este caso, si mostrarMensaje es true, el párrafo se mostrará; si es false, el elemento ni siquiera existirá en el DOM.

🎯 Ventajas de `*ngIf`:

🔹 Remueve completamente el elemento del DOM cuando la condición es false.
🔹 Ideal para elementos que solo se necesitan en ciertas condiciones.
🔹 Mejora el rendimiento si el contenido es pesado, ya que no se renderiza innecesariamente.

⚠️ Desventajas de `*ngIf`:

🔸 Si se usa con contenido pesado, al cambiar la condición a true puede haber un pequeño retraso en la re-renderización.
🔸 No es eficiente si se usa para cambiar entre múltiples opciones, ya que requiere múltiples verificaciones.

🔍 2. ¿Qué es `ngSwitch` y cómo funciona?

ngSwitch es otra directiva estructural que permite alternar entre múltiples opciones. Es similar a switch en TypeScript, donde un valor determina cuál de varias opciones se renderiza.

✅ Ejemplo de uso:

<div [ngSwitch]="estado">
  <p *ngSwitchCase="'iniciado'">🚀 El proceso ha iniciado.</p>
  <p *ngSwitchCase="'en_progreso'">⏳ El proceso está en progreso.</p>
  <p *ngSwitchCase="'completado'">✅ El proceso se ha completado.</p>
  <p *ngSwitchDefault>⚠️ Estado desconocido.</p>
</div>

🎯 Ventajas de `ngSwitch`:

🔹 Más organizado cuando hay múltiples condiciones.
🔹 Evita el anidamiento excesivo de *ngIf, haciendo el código más limpio.
🔹 Mejora la legibilidad cuando hay más de dos condiciones posibles.

⚠️ Desventajas de `ngSwitch`:

🔸 Todos los casos se evalúan, aunque solo uno se muestre.
🔸 No es ideal si solo hay dos condiciones (para esto es mejor *ngIf).

⚖️ 3. Comparación entre `*ngIf` y `ngSwitch`

Característica	`*ngIf`	`ngSwitch`
📌 Condición	Booleano (true/false)	Múltiples valores posibles
🗑️ Eliminación del DOM	Sí, cuando la condición es `false`	Sí, pero mantiene la evaluación de todas las opciones
🔄 Uso recomendado	Mostrar u ocultar elementos dinámicamente	Alternar entre múltiples opciones
⚡ Eficiencia	Mejor si solo hay una o dos condiciones	Mejor si hay más de dos opciones

🛠️ 4. Uso en TypeScript

En Angular, tanto *ngIf como ngSwitch dependen de variables de TypeScript para evaluar sus condiciones. Por ejemplo, en el componente:

export class AppComponent {
  mostrarMensaje: boolean = true;
  estado: string = 'en_progreso';
}

🔹 mostrarMensaje controla la visibilidad del elemento con *ngIf.
🔹 estado define qué opción se muestra en ngSwitch.

🤔 5. ¿Cuándo usar cada uno?

✅ Usa *ngIf cuando solo hay dos opciones (mostrar u ocultar un elemento).

✅ Usa ngSwitch cuando hay múltiples opciones posibles y solo una debe mostrarse.

📝 Ejemplo práctico:

Supongamos que queremos mostrar un mensaje de estado de una tarea:

🔹 Con *ngIf:

<p *ngIf="estado === 'completado'">✔️ Tarea completada</p>
<p *ngIf="estado === 'pendiente'">⌛ Tarea pendiente</p>

🔹 Con ngSwitch:

<div [ngSwitch]="estado">
  <p *ngSwitchCase="'completado'">✔️ Tarea completada</p>
  <p *ngSwitchCase="'pendiente'">⌛ Tarea pendiente</p>
  <p *ngSwitchDefault>⚠️ Estado desconocido</p>
</div>

📌 Si solo hay dos opciones, *ngIf es más eficiente.

📌 Si hay más de dos opciones, ngSwitch es más legible.

🎯 Conclusión

Tanto *ngIf como ngSwitch son herramientas poderosas en Angular, pero deben usarse según el escenario adecuado.

✅ *ngIf es ideal para condiciones simples donde un elemento debe mostrarse o desaparecer completamente del DOM.

✅ ngSwitch es mejor cuando hay múltiples opciones y solo una debe mostrarse.

⚡ Usar la opción correcta puede hacer que tu código sea más eficiente, limpio y mantenible. 🚀

Explorando las Rutas en Angular: Cómo navegar por tu aplicación

Cristian Arieta — Mon, 31 Mar 2025 21:04:00 +0000

¡Bienvenidos a este tutorial sobre rutas en Angular! 🌍 Si alguna vez has creado una aplicación web, seguramente sabes lo importante que es la navegación. En Angular, las rutas nos permiten navegar de una página a otra sin tener que recargar toda la página, lo que hace que la experiencia del usuario sea mucho más fluida. Hoy, vamos a explorar cómo funcionan las rutas en Angular y cómo podemos usarlas para navegar entre diferentes componentes, tanto con parámetros básicos como avanzados. ¡Vamos allá! 🚀

¿Qué son las Rutas en Angular? 🤔

Las rutas en Angular permiten definir las distintas "páginas" o "vistas" dentro de una aplicación de una sola página (SPA). En lugar de recargar toda la página cada vez que el usuario navega, Angular solo cambia el componente que se debe mostrar en función de la URL.

Configurar Rutas Básicas 🛣️

Para empezar, vamos a configurar algunas rutas básicas en nuestra aplicación Angular. Vamos a ver cómo hacerlo paso a paso.

Paso 1: Definir las rutas en `app-routing.module.ts`

Este es el archivo donde configuramos todas nuestras rutas. Cada ruta debe tener un path (la URL a la que queremos acceder) y un component (el componente que se debe mostrar cuando el usuario navega a esa URL).

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Página de inicio
  { path: 'about', component: AboutComponent } // Página de "Sobre nosotros"
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

En este ejemplo, hemos creado dos rutas:

path: '' — La página de inicio, que es lo que se muestra cuando visitamos la raíz de la aplicación.
path: 'about' — La página de "Sobre nosotros", que se accede con /about.

Paso 2: Usar el `router-outlet`

El siguiente paso es asegurarnos de que tenemos un lugar donde las rutas se rendericen en el DOM. Esto se hace usando la directiva router-outlet.

En nuestro app.component.html, agregamos lo siguiente:

<router-outlet></router-outlet>

Este es el espacio donde los componentes se mostrarán según la ruta seleccionada.

Navegación entre Rutas 🧭

Ahora que tenemos nuestras rutas configuradas, ¿cómo navegamos entre ellas? Angular tiene una directiva llamada routerLink, que nos permite crear enlaces para navegar entre las páginas.

<a routerLink="/">Inicio</a>
<a routerLink="/about">Sobre nosotros</a>

Cada vez que el usuario haga clic en uno de estos enlaces, Angular cambiará la vista sin recargar la página.

Rutas con Parámetros 🔑

A veces necesitamos pasar información de una ruta a otra. Esto se puede hacer fácilmente con los parámetros de ruta.

Parámetros Básicos

Supongamos que tenemos una página de detalle de un producto. Queremos que la URL incluya el ID del producto para que podamos cargar los datos del producto correspondiente.

Paso 1: Definir la ruta con un parámetro

const routes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent }
];

Aquí, :id es un parámetro que representará el ID del producto en la URL. Por ejemplo, product/123 cargará el detalle del producto con el ID 123.

Paso 2: Acceder al parámetro en el componente

Dentro de ProductDetailComponent, podemos acceder al parámetro id de la siguiente manera:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id');
  }
}

En este caso, this.route.snapshot.paramMap.get('id') nos da el valor del parámetro id que se pasa en la URL.

Rutas Avanzadas con Query Parameters 🔍

Los Query Parameters nos permiten pasar información adicional en la URL de una manera más flexible. A diferencia de los parámetros de ruta, estos no forman parte de la estructura principal de la URL.

Paso 1: Definir la ruta con query parameters

Supongamos que queremos pasar un filtro de búsqueda como parámetro. La URL podría verse así: products?category=electronics.

const routes: Routes = [
  { path: 'products', component: ProductListComponent }
];

Paso 2: Acceder a los query parameters

Para acceder a los query parameters, usamos el ActivatedRoute de manera similar a como accedemos a los parámetros de ruta, pero en este caso, debemos usar queryParamMap:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  category: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category');
    });
  }
}

Redirección y Rutas Protegidas 🚨

Las rutas también pueden redirigir automáticamente a los usuarios si no tienen acceso a ciertas páginas o si no están autenticados. Para ello, usamos las guardias de ruta (CanActivate, CanLoad).

Por ejemplo, si queremos proteger una página de administrador:

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];

El AuthGuard verifica si el usuario está autenticado. Si no lo está, lo redirige a la página de inicio de sesión.

Conclusión 🎉

Las rutas son un componente clave para cualquier aplicación web moderna. Nos permiten navegar entre diferentes vistas sin recargar toda la página, hacer aplicaciones más rápidas y crear experiencias más fluidas. Y ahora, con los parámetros de ruta y los query parameters, puedes hacer que tus rutas sean aún más dinámicas y flexibles. ¡Ahora es tu turno de experimentar y crear aplicaciones con rutas en Angular!

DEV Community: Cristian Arieta

Angular Pipes: Transformando Datos Directamente en tus Plantillas HTML 🔧 - Guía Exhaustiva ✨

Expresiones Regulares (RegEx): Guía Esencial para Desarrolladores - Nota de Repaso

Funciones Recursivas en JavaScript: Modificando Datos Anidados por ID - Guía Práctica

📘 Clase `Num` en TypeScript 🤓

🧱 ¿Qué es una clase Num?

🔨 Ejemplo base de una clase Num

✅ Uso de la clase Num

🎯 ¿Para qué sirve crear una clase Num?

💡 Ejemplo avanzado: clase Num con operaciones matemáticas

🧪 Uso:

🧙‍♂️ Ventajas de usar esta clase Num

📌 Detalles técnicos

🧁 Postre final: Mini práctica para ti

¿Qué es el tipado en TypeScript?

🗂️ Tipos primitivos (los básicos)

1️⃣ string – Cadenas de texto

2️⃣ number – Números (enteros y decimales)

3️⃣ boolean – Verdadero o falso

4️⃣ null – Valor nulo (ausente intencionalmente)

5️⃣ undefined – Aún no se ha definido

6️⃣ symbol – Valor único e inmutable

7️⃣ bigint – Números grandes

🧺 Tipos estructurados

8️⃣ array – Arreglos

9️⃣ tuple – Arreglos con tipos fijos

🔟 object – Objetos con propiedades

🧩 Tipos especiales

1️⃣1️⃣ any – Cualquier tipo (pierdes seguridad de tipos)

1️⃣2️⃣ unknown – Tipo desconocido, pero más seguro que any

1️⃣3️⃣ void – No devuelve nada (funciones sin retorno)

1️⃣4️⃣ never – Nunca retorna (errores, bucles infinitos)

💥 Tipos combinados

1️⃣5️⃣ Union types – Uno u otro

1️⃣6️⃣ Literal types – Valores específicos

1️⃣7️⃣ Type alias – Alias de tipos

1️⃣8️⃣ Enum – Enumeraciones (grupos de valores constantes)

🧠 Resumen en tabla

🧪 ¿Listo para practicar?

🎯 Las validaciones ternarias en TypeScript (y también en HTML con Angular)

🧠 ¿Qué es una validación ternaria?

🧪 Ejemplo básico en TypeScript

🧩 ¿Y en Angular HTML con *ngIf o atributos?

🧪 Otro ejemplo: mostrar íconos según estado

⚠️ Cuándo NO usar ternarias

✅ Cuándo SÍ usar ternarias

🧭 En resumen:

🚀 Ejercicio Rápido

🚀 ¡A Navegar con Bucles en Angular!

Aprende a repetir elementos como todo un Capitán 🧑‍✈️⚓

1️⃣ *ngFor en el HTML – El timón del barco 🚢

2️⃣ Bucles en TypeScript – Los motores del barco 🛠️

🧪 Ejemplo con for tradicional:

🧪 Ejemplo con forEach:

🧪 Ejemplo con map para transformar:

3️⃣ Bonus: ng-template para más control 🧙‍♂️

🧭 Resumen del Capitán

🚀 ¡Zarpa y practica!

Los bucles son parte del alma de una app dinámica. Ya sea mostrando productos 🛍️, usuarios 👥 o posts 📝, sabrás cómo hacerlos navegar con estilo.

🚀 Virtual Scroll en Angular: ¡Carga listas infinitas sin perder rendimiento!

🧐 ¿Qué es Virtual Scroll?

📌 ¿Cuándo usar Virtual Scroll?

🛠 Implementación de Virtual Scroll en Angular

1️⃣ Instalar Angular CDK

2️⃣ Importar ScrollingModule en tu módulo

3️⃣ Crear una lista con Virtual Scroll

🎯 ¿Cómo funciona Virtual Scroll?

🔥 Mejoras avanzadas con Virtual Scroll

1️⃣ Usar Virtual Scroll con una API (datos dinámicos)

📌 Diferencia entre Virtual Scroll y Paginación

🎯 Conclusión

🎓 ¡Ahora es tu turno!

🔥 ¿Cuándo se actualiza un componente con `OnPush`?

1️⃣ Cambio en un @Input()

2️⃣ Eventos del DOM (click, input, etc.)

3️⃣ Uso de async en un | async pipe (Observables)

4️⃣ Cambios manuales con markForCheck()

5️⃣ Cambio en una variable dentro de un setTimeout o setInterval

6️⃣ Cambios después de una petición HTTP manual

7️⃣ Re-adjuntar la detección de cambios con reattach()

🧱 ¿Qué es una clase `Num`?

🔨 Ejemplo base de una clase `Num`

✅ Uso de la clase `Num`

🎯 ¿Para qué sirve crear una clase `Num`?

💡 Ejemplo avanzado: clase `Num` con operaciones matemáticas

🧙‍♂️ Ventajas de usar esta clase `Num`

1️⃣ `string` – Cadenas de texto

2️⃣ `number` – Números (enteros y decimales)

3️⃣ `boolean` – Verdadero o falso

4️⃣ `null` – Valor nulo (ausente intencionalmente)

5️⃣ `undefined` – Aún no se ha definido

6️⃣ `symbol` – Valor único e inmutable

7️⃣ `bigint` – Números grandes

8️⃣ `array` – Arreglos

9️⃣ `tuple` – Arreglos con tipos fijos

🔟 `object` – Objetos con propiedades

1️⃣1️⃣ `any` – Cualquier tipo (pierdes seguridad de tipos)

1️⃣2️⃣ `unknown` – Tipo desconocido, pero más seguro que `any`

1️⃣3️⃣ `void` – No devuelve nada (funciones sin retorno)

1️⃣4️⃣ `never` – Nunca retorna (errores, bucles infinitos)

🧩 ¿Y en Angular HTML con `*ngIf` o atributos?

1️⃣ `*ngFor` en el HTML – El timón del barco 🚢

🧪 Ejemplo con `for` tradicional:

🧪 Ejemplo con `forEach`:

🧪 Ejemplo con `map` para transformar:

3️⃣ Bonus: `ng-template` para más control 🧙‍♂️

2️⃣ Importar `ScrollingModule` en tu módulo

1️⃣ Cambio en un `@Input()`

3️⃣ Uso de `async` en un `| async` pipe (Observables)

4️⃣ Cambios manuales con `markForCheck()`

5️⃣ Cambio en una variable dentro de un `setTimeout` o `setInterval`

7️⃣ Re-adjuntar la detección de cambios con `reattach()`

🔍 1. ¿Qué es `*ngIf` y cómo funciona?

🎯 Ventajas de `*ngIf`:

⚠️ Desventajas de `*ngIf`:

🔍 2. ¿Qué es `ngSwitch` y cómo funciona?

🎯 Ventajas de `ngSwitch`:

⚠️ Desventajas de `ngSwitch`:

⚖️ 3. Comparación entre `*ngIf` y `ngSwitch`

Paso 1: Definir las rutas en `app-routing.module.ts`

Paso 2: Usar el `router-outlet`