Angular

Proyectos

app sistema de gestion de inventario

Angular 19

Hydration avanzado
- Evaluación de eventos después del proceso de rehydration.
- Optimización del traspaso de estado entre servidor–cliente.
- Control de eventos diferidos y diagnóstico de incompatibilidades.
Defer
- Carga diferida por condiciones: on idle, on viewport, on interaction.
- Integración con señales y flujos reactivos.
- Patrones: progressive loading, critical path isolation.

Testing

Testing
karma
jasmine
unit test
BDD

Docs y recursos

gpt angular rxjs vs signal vs ngrx

Apuntes Angular 🔥

Tareas generales

Recomendaciones Angular y entorno

Configurar angular.json para compilar con esbuild como builder principal.
Cambiar librerías de testing a Jest para mayor rendimiento.
Preferir provideRouter con standalone en lugar de RouterModule.
Comandos CLI para standalone: componentes, pipes, services sin NgModule.
Importar explícitamente NgIf, NgFor, etc. en standalone.
Usar yarn vs npm; borrar lock file antes de cambiar gestor.
Crear componentes:
- Dashboard standalone.
- Hijo con ChangeDetectionStrategy.OnPush.
Usar constructor para recibir inputs (Angular 17+).
Debug de cambios de clase usando setTimeout para verificar actualización en ciclo de vida.
Uso de partials y manejo de flickering en Angular Universal.
Comparación: Observable vs ChangeDetection + señales.
Schematics
- Generating code using schematics • Angular
- Paso a paso- Cómo utilizar Angular Schematics - Bravent
Usar skeleton UI para evitar flickering al cargar.
Evaluar rendimiento con Lighthouse.

Código / Ejemplos técnicos

Standalone Component básico

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

@Component({
	selector: 'app-demo',
	standalone: true,
	imports: [NgIf],
	template: `
		<h1>Hola Angular Standalone</h1>
		<p *ngIf="isReady">Componente cargado.</p>
	`
})
export class DemoComponent {
	isReady = true;
}

Configuración mínima provideRouter

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';

const routes: Routes = [
	{ path: '', loadComponent: () => import('./home.component') }
];

bootstrapApplication(AppComponent, {
	providers: [provideRouter(routes)]
});

Ejemplo signals Angular 18–19

import { signal, effect } from '@angular/core';

const counter = signal(0);

effect(() => {
	console.log('Counter:', counter());
});

counter.update(v => v + 1);

—-

Curso Angular

Intro a Angular: Conceptos base

Bundler, rutas, render, caching
- Flujo interno: compilación → bundling → tree-shaking → render → re-render por cambio de estado.
- Rutas con routerLink y router-outlet.
- Cacheo de assets estáticos y reuso modular.
CLASE DEFINITIVA ANGULAR — Conceptos básicos
Shared modules
- Módulos compartidos para directivas, pipes y componentes.
- Patrón legacy (deprecado desde v16).
Standalone components (v14–v19)
- Eliminan la necesidad de NgModules.
- Cada componente importa sus dependencias (self-contained module).
- Mejor integración con SSR y lazy loading.
Decoradores
- @Component, @Directive, @Injectable, @Input, @Output.
Directivas vs componentes (v14+)
- Directivas estructurales (@if, @for) reemplazan a muchos patrones anteriores.
- Reduce verbosidad de <ng-container> y <ng-template>.
Módulos + servicios singleton
- Servicios con providedIn: ‘root’ → singleton.
- Similar a context en Next.js.
ESModules + vite.js
- Sustituye gradualmente Webpack.
- Construcciones más rápidas, soporte HMR más estable.
Signals vs RxJS
- Mecanismo de reactividad sin Zone.js.
- Compartición de estado por servicios.
- No requiere async pipe para notificación.
- Sintaxis tipo Svelte: plantillas reactivas.
- Pero RxJS sigue siendo necesario para flujos complejos.
Plantillas y directivas modernas
- @if, @for, @switch.
- ng-container, ng-template, ngSwitch aún existen.
Testing
- Karma/Jasmine legacy → preferible Jest.
Angular Universal (SSR)
- Renderizado en servidor + Hydration.
- Problemas frecuentes: UI flickering, manejo de estado entre server/cliente.
Hydration
- Mantiene eventos y estado del DOM renderizado en servidor.
- Crucial para performance y SEO.
Vite como bundler
- Experimental turnado en versiones recientes.
Config general
- ESLint + EditorConfig.
- Uso estándar de router-outlet.
Lazy loading
- Carga de carpetas privadas no añadidas al chunk principal.
Zone.js
- Analiza triggers de estado:
  - async, requests, eventos.
  - setTimeout, setInterval.
- NgZone permite ejecutar fuera del árbol de detección de cambios.
- Angular evalúa expresiones y ciclo de vida a través de checks internos.
Caching + Pipes
- Pure pipes → memoization interna.
- Ideales para operaciones livianas y repetidas.

Angular 6: Conceptos fundamentales

Componentes, directivas, decoradores, clases
Ciclo de vida (implements OnInit, OnDestroy, AfterViewInit, ngOnInit, ngDoCheck)
- Acceso al DOM solo mediante hooks adecuados.
Directivas estándar
- ngIf, ngFor, ngClass.
- Crear directiva: ng g directive magnifier.
Decoradores
- HostBinding, HostListener, Input, Output.
Angular Pipes
- Pipes básicos y custom.
- async pipe para Observables/Promises.
Crear pipe:
- ng generate pipe name.
- Implementar método transform().

Estructura de proyectos y rutas

Estructura ideal Angular 17
Sistema de rutas
- Definir rutas en múltiples archivos: auth.routes.ts, dashboard.routes.ts.
- Uso de loadChildren, imports dinámicos con arrow.
- Layouts por funcionalidad.
Ejemplo:
- app.routes.ts — Arquitectura Angular
Core folder
- Guards, interceptors, models, services.
Shared folder
- Pipes, directivas, componentes reutilizables.

Observables y RxJS

Observables en Angular y RxJS
Repo ejemplo Hot/Cold Observables
Tipos de Observables
- Hot → infinito, multicast, emite sin observers.
- Cold → finito, unicast.
- Finitos vs infinitos.
Subjects
- Subject, BehaviorSubject, ReplaySubject.
- HTTP requests → cold -> unicast.
Patrones
- Servicio con DI → creación de Observable + getters/setters.
- Uso de $ como convención.
- Operadores TS:
  - ! (definitivamente asignado).
  - ? (prop opcional).
- Uso de pipe + async.
- BehaviorSubject.asObservable().
- next() para emitir valores.
Hot observable práctico
- Enviar valores entre componentes con servicio + eventos + ngModel.
- private para encapsular service properties.
Cómo usar Observables en Angular paso a paso
Temas:
- Métodos de servicio, suscripciones, map, reduce, pipe().
- Observable con setInterval.
- Navbar subscriptor con método getter.
- Pasar currentDate por observable.
- Uso doble: servicio con y sin interval.
- Angular 17 con NgModule legacy.
Pendientes
- Lista editable de productos seleccionados.
- index vs id para productos.

Detección de cambios (Angular 17–19)

Change Detection Default & OnPush
Repo change detection
Zone.js + ChangeDetectorRef
- Necesarios para apps complejas.
Ejercicios sugeridos:
- Drag and drop simple.
- Cambio de color en árbol de componentes.
Outer Zone vs Inner Zone
- runOutsideAngular → evitar CD.
OnPush
- No recorre todo el árbol.
- Requiere data inmutable.
- Cambios por referencia, no por mutación.
- Funciona con Observables + async pipe.
- Difícil migrar en apps legacy.
Ejemplo:
- public data: levelData[] = [{}]
- Child nodes pasados por referencia o copias.
Configurar:
- changeDetection: ChangeDetectionStrategy.OnPush
ElementRef + NgZone
- Modificar clases con nativeElement.classList.
- Usar runOutsideAngular con setTimeout.
Ciclos de vida
- Triggers → eventos, endpoints, cambios de entrada.
- ngOnInit, ngOnChanges, ngDoCheck.
- Mutabilidad vs inmutabilidad.
- Copy por spread para evitar deep-check.
EventEmitter
- Comunicación parent-child.
- [()] funciona con OnPush.
Signals v16–v19
- Estado compartido por servicios.
- Se mantiene Zone.js de momento para detección global.

Autenticación y Refresh Token (Angular 18)

Conceptos generales

Autenticación con JWT
- Access Token → corta duración, se envía en cada petición.
- Refresh Token → larga duración, solo se usa cuando expira el access token.
Control de acceso y estadísticas
- Estado de usuario, roles, permisos, expiración y reintentos.
Referencias:
- Refresh Tokens en Angular 18
- Repo — CodePills RefreshToken

Backend + Frontend

El backend debe exponer:
- /login
- /refresh → recibe refreshToken y devuelve nuevo token.
- /logout → invalida refreshToken opcionalmente.
El frontend gestiona storage + interceptor.

Servicio de usuarios

Funcionalidades:
- login(), register(), refreshToken(), getUser().
- Uso de firstValueFrom() para resolver Observables en funciones async.
- Manejo de localStorage para tokens.
Ejemplo:
- Guardar tokens → localStorage.setItem('token', x)
- Obtener tokens → localStorage.getItem('token')

Interceptor de autenticación (`auth.interceptor.ts`)

Arquitectura moderna con función interceptor (no clase):

	export const authInterceptor: HttpInterceptorFn = (req, next) => { ... }
	```

- Lógica:
	- Inyectar servicio de usuario → obtener token `getAuthToken()`.
	- Hacer `clone()` a la request para agregar headers.
	- `next(authReq)` → enviar al siguiente interceptor/handler.
	- Manejo de errores con `pipe()` + `catchError()`.
- Ejemplo de flujo:
	- Petición → error 401 → `switchMap()` → pedir refresh → guardar nuevo token → repetir petición original.
- Ejemplo de captura de error final:
	- Quitar tokens:
		- `localStorage.removeItem('token');`
		- `localStorage.removeItem('refreshToken');`
	- Lanzar error final:
		
```ts
		return throwError(() => finalError);
		```


### Configuración del interceptor
- Declarado en **app.config** con providers:
	
```ts
	provideHttpClient(withInterceptors([authInterceptor]))
	```

- Se integra con HttpClient de Angular 18.

---

## Angular vs React — Comparativa práctica (CRM)
- Video:  
	- [Angular vs React — CRM](https://youtu.be/0uS3VL_auNU)
- Repos:
	- Angular: https://github.com/GarajedeIdeas/CodePills-Angular-CRMEmpleados
	- React: https://github.com/GarajedeIdeas/CodePills-React-CRMEmpleados

### Diferencias clave
- Angular: framework completo, DI nativa, rutas oficiales, RxJS integrado.
- React: librería → debes elegir router, estado, store.
- Angular CLI vs Vite + herramientas externas en React.
- Angular funciona mejor para aplicaciones CRM con estructura compleja.

---

## Testing en Angular 17–18 (Jasmine + Karma)

### Conceptos base
- Video: [Testing en Angular 17](https://youtu.be/NmLt2AvuREQ)
- Repo ejemplo: https://github.com/GarajedeIdeas/CodePills-AngularTesting
- Elementos de Testing:
	- `describe`, `it`, `beforeEach`
	- `TestBed`
	- `ComponentFixture`
	- `expect`, `toBeTruthy`, `toBe`, `toContain`, `toMatch`
	- Callbacks, funciones, clases, métodos estáticos.

### Testing de Services
- Importar `HttpClientTestingModule`.
- Inyectar servicio con `TestBed.inject()`.
- Probar observables usando:
	
```ts
	it('...', (done: DoneFn) => { ... })
	```

- Usar `done()` para finalizar test async.
- Matchers:
	- `toBe` → valores exactos.
	- `toHaveBeenCalled` → espías y mocks.

### Testing de Promesas
- Comprobar resoluciones con `async/await` o `done()`.

### Testing de Componentes
- Flujo:
	- Declarar variables:
		
```ts
		let component: ProfileCardComponent;
		let fixture: ComponentFixture<ProfileCardComponent>;
		```

	- Configurar:
		
```ts
		TestBed.configureTestingModule({ ... })
		```

	- Crear y detectar cambios:
		
```ts
		fixture = TestBed.createComponent(ProfileCardComponent);
		fixture.detectChanges();
		```

- Testing de DOM:
	- `fixture.nativeElement`
	- `By.css()` para seleccionar.
	- Matchers:
		- `toContain`
		- `toMatch`

---

## Standalone vs Modules — Migraciones
- Video: [Componentes Standalone](https://youtu.be/FUXM-Qxvfqg)
- Cambios:
	- Ya no existe `declarations` → ahora `imports`.
	- Facilidad para lazy loading.
	- Migración progresiva en Angular 17–19.

---

## Directivas: atributo vs estructurales
- Video:  
	- [Directivas estructurales/atributo](https://youtu.be/On_Bn6Rqyks?list=PL42UNLc8e48RINrNGumxAKulG5CWgs_yv)
- Repos:
	- https://github.com/Gentleman-Programming/Angular-Desde-0-Avanzado

### Directivas de Atributo
- `ngStyle`, `ngClass`
- Manipulan estilos/atributos del elemento.

### Directivas Estructurales
- `*ngIf`, `*ngFor`, `*ngSwitch`
- Controlan la creación/destrucción de nodos del DOM.
- `ng-template` (con id)
- `ng-container` (sin renderizar wrapper)
- Renderizado masivo de elementos.
- `trackBy()` para listas grandes y evitar re-render.

---

## Autenticación con Cookies (MEAN Stack)
- Video: [Cookie Authentication Angular + Node + Mongo](https://youtu.be/UzF7eb2iZe0)
- Repos:
	- Cliente: https://github.com/thecodedeck/cookie-client  
	- Servidor: https://github.com/thecodedeck/cookie-server
- Conceptos:
	- Cookies HttpOnly
	- CSRF tokens
	- SameSite strict/lax
	- Acceso desde Angular vía HttpClient

---

## Prettier + ESLint + Husky + Lint-Staged (Angular 17+)
- Video: https://youtu.be/gRMuLqOYIB0
- Configuración recomendada:
	- Husky → hooks de git.
	- Lint-staged → valida solo archivos modificados.
	- Formateo automático antes de cada commit.

---

## Apuntes del libro de Angular
- Enlace: 
- `keyof` para tipado avanzado.
- Variables `$even` y `$odd` en `ngFor`.
- Repaso de tipos de directivas:
	- Atributo
	- Estructural (`*ngIf`/`*ngFor`)

---

## Temas de entrevista Angular 18
- Video: [Paso entrevista Angular 18](https://youtu.be/mqyybAnmALA)
- Cuestiones:
	- HttpClient vs fetch.
	- `inject()` vs `get()`.
	- Ciclo de vida y cambio de detección.
	- Signals, zoneless angular.
	- Standalone + rutas funcionales.


# angular 17 con nodejs 

## Recursos base
- [Angular Crash Course 2024 (for Beginners) - YouTube](https://youtu.be/f7BJFTEbc10?t=4543)
- [GitHub - thecodedeck/angular-cc-1-client](https://github.com/thecodedeck/angular-cc-1-client)
- [GitHub - thecodedeck/angular-cc-1-server](https://github.com/thecodedeck/angular-cc-1-server)
## CRUD Node.js + Angular  
### Objetivo general
Crear un **CRUD completo** con **Node.js + Express** y base de datos en **JSON**, conectando con Angular 17/18. Incluir paginación, pruebas en Postman y consumir datos desde el frontend.

### Backend Node.js  
- **Endpoints y servidor**
	- express + cors + fs → `require()`
	- uso de middlewares: `use()`, `express.json()`
	- métodos REST: `get()`, `post()`, `put()`, `delete()`, `listen()`
	- `req`, `res`, estados HTTP, `res.status().send()`

- **Métodos POST con fs**
	- leer JSON
	- validar si hay cuerpo, si falla → retornar error
	- crear nuevo item → `jsonData.push()`

- **GET**
	- devolver lista completa o filtrada
	- escribir cambios en archivo JSON cuando sea necesario
	- convertir a string antes de escribir

- **PUT**
	- actualizar por ID
	- usar `findIndex()`  
	- `req.params.id` → `parseInt()`
	- validar que el índice exista  
	- destructuring del `req.body`

- **POST con IDs incrementales**
	- calcular `maxId` con:
		- `reduce()`
		- `Math.max()`
	- nuevo ítem:
		``id: maxId + 1``

- **DELETE**
	- borrar por índice
	- validar ID inexistente

### Test de endpoints con Postman  
- enviar objetos en `body`
- PUT con URL tipo:  
	`clothes/1`
- validar
	- códigos HTTP  
	- errores de lectura  
	- escritura en el JSON

---

## Frontend Angular — Integración con la API
### Interfaces y servicios
- crear interfaces: `Product`, `Pagination`, `Options`
- servicios:
	- api service → peticiones generales
	- product service → lógica de negocio
- uso de:
	- constructor
	- dependency injection
	- providers  
	- `providerHttpClient` en `app.config.ts`

### Ciclo de componentes
- en Home:
	- `constructor(private productService: ProductService)`
	- `ngOnInit()`
	- suscripción a productos

### ApiService
- `HttpClient` en constructor
- métodos GET, POST, PUT, DELETE
- usar tipos `T`
- parámetro `options` usando interface
- permitir `?` opcionales  
- `Observable<T>`

### ProductService
- funciones flecha:
	- `getProducts`
	- `addProduct`
	- `editProduct`
	- `deleteProduct`
- conexión con ApiService

---

## Componentes
### Estructura base
- header, footer, wrapper
- carpeta `layout/`
- imports según necesidad

### Home Component
- plantilla con `*ngFor`
- array tipado de productos
- recibir productos del servicio
- manejar paginación y output de productos

### Product Component  
- `@Input()`  
	- usar `!` si no se inicializa en el constructor
	- `[products]` en Home
- doble interpolación ``
- imagen:
	
```html
	<img [src]="product.image" />
	```


- **PrimeNG rating**
	- `[(ngModel)]="product.rating"`
	- importar `FormsModule`

- **@Output()**  
	- `EventEmitter<Product>`
	- `emit()` en `ngOnInit`

- comunicación:
	
```html
	<app-product (productOutput)="onProductOutput($event)"> </app-product>
	```


---

## Paginación
- función `fetchProducts(page, rows)`
- llamada dentro de `ngOnInit`
- usar `subscribe()`:
	- actualizar `totalRecords`
- `onPageChange(event)`:
	- `event.page`
	- `event.rows`

### Configuración
- importar `provideAnimations()` en `app.config.ts`  
- pasar props al componente paginator

---

## CRUD de productos desde Home
- funciones:
	- `addProduct`
	- `editProduct`
	- `deleteProduct`
- mismas firmas en servicio y componente, pero en contextos distintos
- buenas prácticas:
	- usar `return` para cortar flujo en lugar de `else`
	- manejar `next:` y `error:` en `subscribe()`
	- refrescar página:
		
```ts
		this.fetchProducts(0, this.rows);
		```


---

## Pop-up (Dialog) para editar / añadir productos  
### Conceptos clave
- Uso de **DialogModule** de PrimeNG  
- Componentes con:
	- `@Input()` (booleans, header, product)
	- `@Output()` (EventEmitter)
- Two-way binding personalizado:
	
```html
	[(visible)]="display"
	```

- Inputs dinámicos (ej: header personalizado)
- Lógica en **HomeComponent**:
	- propiedades: `displayEditPopup`, `displayAddPopup`
	- métodos: `toggleEditPopup()`, `toggleAddPopup()`, `toggleDeletePopup()`
	- añadir `id?` en interfaz `Product`
	- propiedad fuerte con `!`:
		
```ts
		@Input() header!: string;
		```


### Flujo de edición
- guardar producto seleccionado:
	
```ts
	selectedProduct!: Product;
	```

- onConfirmEdit:
	
```ts
	onConfirmEdit(product: Product) {
	    if (!this.selectedProduct.id) return;
	    this.editProduct(product, this.selectedProduct.id);
	}
	```

- antes se usaba `?? 0` → ahora mejor if + return

### Flujo de alta
- `onConfirmAdd`
- `onProductOutput` para recibir eventos desde el popup
- `onPageChange` mantiene paginación sincronizada

---

## Botones en ProductComponent (editar / eliminar)

### Funciones en el componente
- `editProduct()`
- `confirmDelete()`
- `deleteProduct()`
- `ngOnInit() {}`

### Iconos
- instalar package de íconos
- añadir en `angular.json` →  
	`architect → build → options → styles`

### Confirmación de borrado (PrimeNG)
- usar referencia al botón:
	
```html
	<button #deleteButton ...>
	```

- en TS:
	
```ts
	@ViewChild('deleteButton') deleteButton!: ElementRef;
	```

- confirm service:
	
```ts
	this.confirmationService.confirm({
	    target: this.deleteButton.nativeElement,
	    message: '¿Seguro que deseas borrar?',
	    accept: () => this.deleteProduct()
	});
	```


- emitir evento al padre:
	
```ts
	this.delete.emit(this.product);
	```


### CORS en servidor Node
- evitar errores:
	
```js
	const corsOptions = {
	  origin: "*",
	  methods: "GET, POST, PUT, DELETE",
	};
	```


### Borrado desde Home
- si hay ID:
	
```ts
	this.deleteProduct(product.id);
	```


---

## Paginador (PrimeNG)
- Referencia al paginator:
	
```ts
	@ViewChild('paginator') paginator: Paginator | undefined;
	```

- Resetear al modificar productos:
	
```ts
	this.paginator?.changePage(0);
	```


- Uso del método en `next:` de los CRUD  
- Decorador personalizado opcional para controlar paginator

---

## AppModule vs Standalone + Lazy Loading

### Generar módulo con routing

ng generate module modules/about-us –routing

`

- se crea:
	- `about-us.module.ts`
	- `about-us-routing.module.ts`
	- componente `about-us.component.ts`

### Rutas internas del módulo

```ts
const routes: Routes = [
	{ path: '', component: AboutUsComponent }
];

Diferencias clave

App routing → router principal
Child routing → módulos cargados dinámicamente
forRoot() vs forChild()

Carga diferida (Lazy)

En App Routes:

{
  path: 'about-us',
  loadChildren: () =>
    import('./modules/about-us/about-us.module')
      .then(m => m.AboutUsModule)
}

sí → es una promesa

Export vs Imports

se exporta para hacer módulos reutilizables
evita repetir imports en cada componente

Flags CLI

--routing
--standalone=false

Menú en Header

rutas activas:

  <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact:true }">

usar routerLink en vez de href

Estructura modular y servicios

separar por responsabilidad:
- módulos de características
- servicios globales
- módulos compartidos (SharedModule)
organizar assets:
- Angular 17 → assets/manifest.json
- Angular 18 → public/

Problemas visuales: overflow del nombre + símbolo de moneda

Opciones antiguas

concatenate símbolo en template
función truncateName():

  if (name.length > 16) return name.slice(0, 16) + '...';
  return name;

Solución profesional: Pipes

Crear pipes

ng generate pipe pipes/truncate-name
ng generate pipe pipes/price

Usos en template

{{ product.name | truncateName : 16 : "..." }}
{{ product.price | price }}

truncate-name.pipe.ts

transform()
tipo unknown
validar longitud
devolver string truncado

price.pipe.ts

transform(value: unknown): unknown {
	return `${value}$`;
}

importar pipe en el componente necesario

Validadores y Formularios (Reactive Forms)

FormBuilder

productForm = this.formBuilder.group({
  name: ['', [Validators.required, this.specialCharacterValidator()]]
});

Validador personalizado

specialCharacterValidator(): ValidatorFn {
  return (control) => {
    const regex = /[^a-zA-Z0-9 ]/g;
    const hasSpecial = regex.test(control.value ?? '');
    return hasSpecial ? { hasSpecialCharacter: true } : null;
  };
}

OnChanges + patchValue (nuevo enfoque)

antes → ngOnInit
ahora → ngOnChanges porque recibe nuevos inputs

this.productForm.patchValue(this.product);

Template

<form [formGroup]="productForm">
	<input formControlName="name">
</form>

`ngModel` vs `formControl`

rating (PrimeNG) usa ngModel → mezclar con:

  [ngModelOptions]="{standalone: true}"

Evitar undefined / null

destructuring seguro:

  const { name, image, price, rating } = this.productForm.value;

en emit():

  name: name || ''

—-

Angular 16–17

Fundamentos, arquitectura híbrida (Modules + Standalone), comunicación entre componentes, services, binding y reactividad.

1. Recursos Base y Repositorios

Info y código

[ANGULAR desde cero

Curso tutorial completo gratis por Sergie Code - YouTube](https://www.youtube.com/watch?v=soInCF7nbDw)

Instalaciones necesarias para el curso de ANGULAR · GitHub
GitHub - sergiecode/base-lista-tareas-angular
GitHub - sergiecode/lista-tareas-curso-angular
GitHub - sergiecode/landing-page-angular-17
GitHub - sergiecode/angular-diapositivas

Novedades de Angular
- GitHub - sergiecode/novedades-angular-18
- GitHub - sergiecode/proyecto-angular-novedades-tutorial

2. Reactividad en Angular: Signals vs Zone.js vs RxJS

Signals
- API signal() → reactividad sin Zone.js.
- Patrón push basado en refs reactivas.
- Ideal para estado local, inputs, UIs declarativas.
- Angular Signals- Complete Guide
- Angular Signals & Your Architecture- 5 Options - ANGULARarchitects
RxJS
- Flujo de datos continuo.
- Útil para peticiones HTTP, streams, websockets, stores avanzados.
Zone.js
- Mecánica clásica para detectar cambios.
- En Angular 18+ queda como opcional, pero en 16–17 sigue activo por defecto.

3. Arquitectura: SPA, MVC y Preparación de Proyecto

SPA → estructura MVC interna (componentes = vista, servicios = modelo/lógica).
Instalar Angular:
- npm install -g @angular/cli@16.2.10
- Luego actualizar a Angular 17 si hace falta (ng update).
Configurar paquetes estáticos y estilos globales en:
- angular.json → architect → build → options → styles.

4. Angular Modules vs Standalone Components

4.1 Conceptos clave

Puedes trabajar con:
- NgModules tradicionales (Angular < 15).
- Standalone Components (Angular 15+).
- Arquitectura híbrida (lo mejor en Angular 17–18).
Crear proyecto con módulos:
- ng new app --no-standalone
Documentación:
- Importing and using components • Angular
- Angular Standalone Components- Complete Guide
- Convert angular 17 standalone app to module based app. - by brb - Medium
- Best of Both Angular Worlds- Standalone & Modules Combined
- NgModule • Overview • Angular
- Standalone • Angular

4.2 Diferencias esenciales

Standalone
- Importas módulos y componentes directamente en imports: [].
- Sin necesidad de app.module.ts.
NgModules
- Más estructurado en proyectos grandes.
- Permite:
  - Agrupar componentes.
  - Exportar elementos a otros módulos.
  - Lazy loading con loadChildren.

5. Componentes y Organización (Atomic Design)

Arquitectura con organismos, moléculas y átomos.
Cada componente:
- Tiene su clase controladora (TypeScript).
- Ciclo de vida: ngOnInit, ngOnChanges, etc.
- Estilos aislados → :host { ... }.
ng generate component nombre
- Si usas módulos, se registra en app.module.ts.

6. Data Binding (uno de los pilares de Angular)

6.1 Tipos

Interpolación ``
Property Binding [prop]="valor"
Event Binding (click)="handler()"
Two-way Binding [(ngModel)]="valor"

6.2 Formularios

Template-driven → usa ngModel.
Reactive Forms → modelo basado en Observers, más cercano a Signals.
Unidireccional → modelo → vista.
Bidireccional → modelo ↔ vista.

7. Metadata, Decoradores y DI

Decoradores:
- @Component
- @NgModule
- @Injectable
- @Input, @Output
Dependencias:
- Constructor injection.
- API inject() (sin constructor).
- Providers por componente, módulo o root.

8. Inputs: Comunicación Padre → Hijo

En hijo:

	@Input() datoEntrada: string;
	```


- En padre:
	
```html
	<app-hijo [datoEntrada]="valorDesdePadre"></app-hijo>
	```


- Detalles:
	- `[]` recibe datos.
	- En template: ``.

---

## 9. Output: Comunicación Hijo → Padre

### 9.1 Ejemplo básico
- En hijo:
	
```ts
	@Output() messageEvent = new EventEmitter<string>();
	message: string = '';

	enviarMensaje() {
		this.messageEvent.emit(this.message);
	}
	```


- En plantilla del hijo:
	
```html
	<input [(ngModel)]="message">
	<button (click)="enviarMensaje()">Emitir</button>
	```


- Padre:
	
```html
	<app-hijo (messageEvent)="recibirMensaje($event)"></app-hijo>
	```


### 9.2 En standalone
- Importar `FormsModule` manualmente en:
	
```ts
	@Component({
	    standalone: true,
	    imports: [FormsModule]
	})
	```


---

## 10. Decoradores, Tipado y Utilidades

- `?` en TypeScript:
	- Indica que una propiedad es opcional.

---

## 11. Pasar Datos con Servicios (Service Communication)

### 11.1 Principios
- Centralizar estado.
- Aislar lógica de negocio de UI.

### 11.2 DI
- Formas:
	- Inyección por constructor.
		
```ts
		constructor(private _servicioEjemplo: EjemploService) {}
		```

	- `inject()`:
		
```ts
		private servicio = inject(EjemploService);
		```


- Servicios:
	- Métodos **getter** y **setter**.
	- Componentes hermanos pueden compartir información vía servicio.

- Ciclo de vida:
	- `ngOnInit` usado para setear datos iniciales.
	- `@Injectable({ providedIn: 'root' })`

---

## 12. Mini-Ejercicios

### 12.1 Contador simple con eventos
- `(click)="increment()"`, `(click)="decrement()"`.

### 12.2 Ejemplo de saludo con getters/setters en service
- `get nombre()` y `set nombre(value)` enlazados a inputs.

### 12.3 Usar Input y Output entre componentes
- Propagar valores, eventos y mutaciones entre padre e hijo.

---

## 13. Checklist de Inicio de Proyecto Angular 16–17

- [ ] Instalar Angular 16.2.10.
- [ ] Actualizar a Angular 17 si procede.
- [ ] Configurar estilos globales en `angular.json`.
- [ ] Decidir arquitectura: standalone, módulos o híbrido.
- [ ] Crear estructura inicial: components, services, modules.
- [ ] Probar comunicación con Input/Output.
- [ ] Añadir un servicio para estado global.
- [ ] Probar ReactiveForms.
- [ ] Integrar Signals si se quiere arquitectura sin Zone.js.

---



# Angular 16–17 — Parte 2  
Directivas, Pipes, Routing, Navegación, Parametrización, Componentes dinámicos y estructura avanzada.

## 1. Directivas en Angular

- Structural directives • Angular
- Directives • Overview • Angular

### 1.1 Tipos de directivas
- **Estructurales** (`*ngIf`, `*ngFor`, `ngSwitch`)
	- Modifican el DOM añadiendo/removiendo elementos.
- **De atributos** (`ngClass`, `ngStyle`)
	- Modifican estilos, clases y comportamientos.
- **Directivas personalizadas**
	- Decorador: `@Directive({ selector: '[miDirectiva]' })`
	- Usos:
		- Añadir estilos.
		- Controlar permisos.
		- Cambiar comportamiento del DOM.

### 1.2 Creación de una directiva personalizada
- Código básico:
	
```ts
	@Directive({
	    selector: '[resaltar]'
	})
	export class ResaltarDirective {
	    constructor(private el: ElementRef) {
	        this.el.nativeElement.style.backgroundColor = 'yellow';
	    }
	}
	```

- Se usa en HTML:
	
```html
	<p resaltar>Texto destacado</p>
	```

- Nota: En **modules** debes declararla en `declarations`.  
- En **standalone** la importas en `imports: []`.

---

## 2. Pipes: Transformaciones en Plantillas

- Pipes • Overview • Angular

### 2.1 Conceptos
- Son funciones puras **inmutables**.
- Decorador: `@Pipe({ name: 'miPipe' })`.
- Clase debe **implementar `PipeTransform`**.
- Se usan en plantillas:
	
```html
	{{ valor | miPipe:parametro }}
	```

- Uso típico:
	- Buscar y filtrar listas.
	- Formatear texto o números.
	- Truncar strings.
	- Moneda y fecha.

### 2.2 Crear Pipe personalizado

```ts
@Pipe({ name: 'trimText' })
export class TrimTextPipe implements PipeTransform {
	transform(value: string, max: number = 10): string {
	    return value.length > max ? value.slice(0, max) + '...' : value;
	}
}

2.3 Declaración

En module → declarations: [TrimTextPipe].
En standalone → imports: [TrimTextPipe].

3. Routing Avanzado (Angular 16–17)

Common routing tasks • Angular

3.1 Rutas básicas

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

3.2 Navegación en plantilla

Sintaxis clásica

  <a routerLink="/product/3">Ver producto</a>

Con parámetros

  <a [routerLink]="['/product', product.id]">Detalles</a>

3.3 Activar clases según la ruta

Forma antigua:

  <a routerLink="/home" routerLinkActive="active">Home</a>

Forma recomendada (más control):

  <a 
      [routerLink]="['/home']"
      [ngClass]="{ 'active': router.isActive('/home') }"
  >Home</a>

3.4 Capturar parámetros en el componente

En constructor:

  constructor(private route: ActivatedRoute) {}

Suscribirse en ngOnInit:

  ngOnInit() {
      this.route.params.subscribe(params => {
          this.id = params['id'];
      });
  }

3.5 Capturar parámetros múltiples

Ruta:

{ path: 'product/:category/:id', component: ProductDetailComponent }

Template:

[routerLink]="['/product', product.category, product.id]"

3.6 Navegación programática

constructor(private router: Router) {}

irAlProducto(id: number) {
	this.router.navigate(['/product', id]);
}

4. Construir Sistema de Navegación

4.1 Configurar estilos de Bootstrap

En angular.json:

  "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
  ],
  "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]

4.2 ng-bootstrap

Angular powered Bootstrap

4.3 Routing con Modules (Angular 16 clásico)

app-routing.module.ts:

  const routes: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'product/:id', component: ProductDetailComponent },
  ];

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

Asociar path a component → obligatorio.

5. Tabla de Navegación de Productos

5.1 Estática

<ul>
	<li><a routerLink="/product/1">Producto 1</a></li>
</ul>

5.2 Dinámica con ngFor

<li *ngFor="let p of products">
	<a [routerLink]="['/product', p.id]">{{ p.name }}</a>
</li>

6. Componente de Detalles de Producto

6.1 Estructura

Implementa OnInit.
Cargar datos desde:
- Servicio local.
- Petición HTTP.
- Mock.

6.2 Captura de ID

constructor(private _route: ActivatedRoute) {}

ngOnInit(): void {
	this._route.params.subscribe(params => {
		const id = params['id'];
		this.product = this.productList.find(p => p.id === Number(id));
	});
}

6.3 Evitar undefined

<div *ngIf="product as p">
	<h2>{{ p.name }}</h2>
	<p>{{ p.price | currency }}</p>
</div>

6.4 Loading mientras llega el backend

En TS:

  loading = true;

  ngOnInit() {
      setTimeout(() => {
          this.loading = false;
      }, 1000);
  }

En template:

  <div *ngIf="loading">Cargando...</div>
  <div *ngIf="!loading">Contenido</div>

6.5 Angular 17 y ActivatedRoute sin constructor

Con inject():

  private route = inject(ActivatedRoute);

7. Structural Directives Repaso Completo

Structural directives • Angular

7.1 Más usadas

*ngFor
*ngIf
ngSwitch
ngClass
ngStyle
ng-container
- Fragmento sin generar elementos reales.
ng-template
- Plantillas reutilizables.
ngPlural, ngComponentOutlet (avanzado)

8. Componente de Lista de Productos

8.1 Base

Crear interface Product:

  export interface Product {
      id: number;
      name: string;
      price: number;
  }

Array en componente:

  products: Product[] = [...];

8.2 Template

Angular 16:

  <div *ngFor="let p of products">
  	<p>{{ p.name }}</p>
  	<p>{{ p.price | currency }}</p>
  	<a [routerLink]="['/product', p.id]">Ver detalles</a>
  </div>

Angular 17 (@for):

  @for (p of products; track p.id) {
      <div>{{ p.name }}</div>
  }

angular 16 17 parte 3

📌 Forms en Angular (template-driven & reactive)

🔹 Conceptos generales

Forms • Overview • Angular
Validate form input • Angular
Angular - Validating form input
Angular - Building a template-driven form
Diferencias principales:
- template-driven → más declarativo, usa ngModel, ideal para formularios simples.
- reactive-forms → más programático, usa FormGroup, FormControl, escalable.

1. Template-Driven Forms

🧩 Fundamentos

Usa:
- #ngForm en el <form>
- [(ngModel)] (two-way binding)
- (ngSubmit) para manejar envíos
Validaciones:
- Ejemplo:

		*ngIf="!name.valid && name.touched"
		```


### ✔️ Validaciones comunes
- `required`
- `minlength`
- `email`
- Estados:
	- `touched`
	- `dirty`
	- `invalid`
	- `valid`

---

## 2. Reactive Forms

### 🧩 Conceptos clave
- Reactive forms • Angular
- Requiere importar:
	- `ReactiveFormsModule` en `NgModule.imports`
- Clases principales:
	- `FormBuilder`
	- `FormGroup`
	- `FormControl`
	- `Validators`

### 👷 Inicialización
- Inyección en constructor:
	
```ts
	constructor(private fb: FormBuilder) {}
	```

- Crear el formulario:
	
```ts
	this.myForm = this.fb.group({
		name: ['', Validators.required],
		email: ['', [Validators.required, Validators.email]]
	});
	```


### 🔍 Acceso y validación
- `this.myForm.get('name')`
- `hasError('email', 'email')`
- `*ngIf="myForm.get('name')?.touched"`

### ✔️ Control de clases (Bootstrap)

```html
[ngClass]="{'is-invalid': hasErrors('name','required')}"

🔁 Observadores en tiempo real

this.myForm.valueChanges.subscribe(value => {})

🧩 Formulario reactivo con campos dependientes

Escuchar cambios:

  this.myForm.get('tipoDni')?.valueChanges
  	.subscribe(value => this.tipoDni = value);

🧩 Inicializar valores desde servicio (usuario activo)

En ngOnInit:

  this.myForm.get('name')?.setValue(this.userActive);
  this.myForm.get('name')?.disable();

🔄 Patch múltiple de valores

this.myForm.patchValue({
	name: 'Edu',
	email: 'test@test.com'
});

♻️ Reset con limpieza de validaciones

control.clearValidators();
control.updateValueAndValidity();

Ejercicio: Formulario de Contacto con Validación

Template-driven

Agregar FormsModule
Inputs con [(ngModel)] y ngModelOptions
Validaciones con Bootstrap

Reactivo

Inyectar FormBuilder
Crear FormGroup
Validadores
Mostrar errores con métodos de clase

📌 Ciclo de Vida de Componentes (Lifecycle)

Lifecycle • Angular

η Hooks principales:

ngOnChanges
- Detecta cambios en @Input
- Ejemplo con componente dni-input:
  - Padre:

      <dni-input [tipoDni]="tipoDni"></dni-input>
      ```

    * Hijo implementa `OnChanges`:

      
```ts
      ngOnChanges(changes: SimpleChanges): void {
      	const value = !changes['tipoDni'].firstChange
      		? changes['tipoDni'].currentValue
      		: 'default';
      }
      ```

  * Uso de objeto indexado:

    
```ts
    changes?.['tipoDni'].currentValue
    ```

  * Mostrar/ocultar:

    
```html
    *ngIf="mostrarDni"
    ```


* **ngOnInit**

  * Inicialización del formulario
  * Llamadas a servicios
  * `setValue` y `disable`

* **ngDoCheck**

  * Detecta cada ciclo de comprobación

* **ngAfterContentInit / ngAfterContentChecked**

  * Con `@ContentChild`

* **ngAfterViewInit / ngAfterViewChecked**

  * Con `@ViewChild`

* **ngOnDestroy**

  * Desuscribirse de observables
  * Limpiar formularios
  * Uso de RxJS

---

## 📌 HTTP Services & API

### 🔹 Conceptos

* HTTP asincrónico
* Microservicios
* Notificaciones push
* Autenticación
* Storage
* `HttpClientModule` (importar en `app.module.ts`)
* Servicios con `@Injectable()`

### 🧩 Constructor del servicio


```ts
constructor(private http: HttpClient) {}

🧺 Métodos del servicio

GET:

  this.http.get(url)

POST:

  this.http.post(url, body)

📦 Devolver observables

getData(): Observable<any> { ... }

🧩 Suscripción en componente

subscribe({
	next: (data: any) => {},
	error: (error: any) => {}
});

Ejercicio: Llamada a API con HttpClient

🧰 Preparación:

Importar HttpClientModule
Fake API: https://fakestoreapi.com/docs
Crear servicio:

  constructor(private _httpClient: HttpClient) {}

Definir baseURL

🧩 Tipado

Usar quicktype: https://app.quicktype.io/
Enum para categorías: TypeScript- Handbook - Enums
Interface IProduct
Para IDs string → number:

  id: number | string

🔄 Query params

const params = sort ? `?sort=${sort}` : '';
return this._httpClient.get<IProduct[]>(`${this.baseURL}${params}`);

🏷️ Métodos del servicio

getProducts()
getProduct(id)
getCategories()
postProduct(product)
putProduct(product)
deleteProduct(id)

Todos devuelven Observables.

🧩 Componente Productos & Product Detail

✔️ Detalles de producto

Acceso en template:

  {{ product?.title }}

Inyectar servicios:

  constructor(
  	private _apiService: ApiService,
  	private _route: ActivatedRoute
  ) {}

Obtener ID desde la ruta

const id = Number(params['productId']);

Llamar al servicio

this._apiService.getProduct(id).subscribe({
	next: (data: IProduct) => {},
	error: (err) => {}
});

Manejo de errores con next / error

angular 16 17 parte 4

Angular 16 — Estado, Ciclo de Vida, Inyecciones, Destroy & Router

🔹 Estado, observables y manejo de ciclo de vida

Manejo de observables, estado reactivo y asincronía.
Integración con servicios, router y destrucción del componente.
Uso de ngOnDestroy y nuevas APIs basadas en DestroyRef.

🔹 Hydration (Server-Side)

Hydration del DOM cuando se usa SSR.
Permite que Angular reactive un HTML existente generado en servidor.
Optimiza performance, reduce TTI (time to interactive).

Standalone Components

🔹 Conceptos clave

Reemplazan gradualmente a los NgModules.
“Micro-módulos”: cada componente importa solo lo necesario.
Se definen así:

	@Component({
		standalone: true,
		imports: [...],
		selector: 'app-demo',
		templateUrl: './demo.html'
	})
	```


### 🔹 Inyección sin constructor
- Nueva API `inject()`:
	
```ts
	const router = inject(Router);
	```


### 🔹 Nuevas capacidades en @Input
- Requerido:
	
```ts
	@Input({ required: true }) data!: DataType;
	```

- Evita null/undefined.
- Tipado de arrays:
	
```ts
	dataSource: PeriodicElement[] = [];
	```


### 🔹 Transformadores para evitar valores incorrectos
- BooleanAttribute:
	
```ts
	@Input({ transform: booleanAttribute }) expanded = true;
	```

- Previene errores cuando pasan `"true"` o `"false"` como strings.

### 🔹 Cambios en sintaxis HTML
- Angular 16 permite autocierre de etiquetas personalizadas.

### 🔹 Router sin ActivatedRoute
- No siempre hace falta inyectar ActivatedRoute.
- Uso de `inject()` o signals combinados.

### 🔹 Nuevo patrón de destrucción
- Antes:
	
```ts
	ngOnDestroy() {
		this.sub.unsubscribe();
	}
	```

- Ahora:
	
```ts
	const destroyRef = inject(DestroyRef);
	destroyRef.onDestroy(() => { /* cleanup */ });
	```


---

## Angular 16 — Signals

### 🔹 Conceptos base
- *signal()*, *computed()*, *effect()*
- Observan cambios automáticamente, reactividad fina.
- Inspirados en **Solid.js** y principios SOLID- los 5 principios que te ayudarán a desarrollar software de calidad.

### 🔹 Ejemplos básicos
- Definición:
	
```ts
	const counter = signal<number>(0);
	```

- Actualización:
	
```ts
	counter.set(5);
	counter.update(v => v + 1);
	```

- Computados:
	
```ts
	const z = computed(() => x() + y());
	x.set(z());
	```


### 🔹 Signals con arrays u objetos
- Array de objetos:
	
```ts
	const users = signal([{ name: '' }]);
	```

- Mutación:
	
```ts
	users.mutate(u => { u[0].name = 'John'; });
	```

- Lectura:
	
```ts
	users()[0];
	```


### 🔹 Efectos
- Reaccionan automáticamente:
	
```ts
	effect(() => {
		console.log(counter());
	});
	```


### 🔹 Signals con callbacks y cleanup
- Caso con temporizadores:
	
```ts
	const timer = signal(0);

	effect((onCleanup) => {
		const t = setTimeout(() => timer.set(1), 1000);
		onCleanup(() => clearTimeout(t));
	});
	```

- Efectos pueden cancelarse antes de terminar.

---

## Angular 16 vs Versiones Anteriores

### 🔹 Enlaces
- [github.dev/sergiecode/proyecto-angular-novedades-tutorial](https://github.dev/sergiecode/proyecto-angular-novedades-tutorial)

### 🔹 Cambios conceptuales
- RxJS y Material ya integrados.
- Antes todo pasaba por NgModules.

### 🔹 Tipado simple en TS

```ts
a: number = 1;
x: number = this.a + this.b;

🔹 Observables y reactividad

RxJS
- Stream de eventos.
- subscribe()
- Observable
BehaviorSubject
- Mantiene último valor
- Lo emite a nuevos suscriptores
Subscription
- Administra observables y cleanup.

🔹 Convenciones

Variables con $ para observables.

🔹 Signals reemplazan parte del ciclo de vida

signal(), computed(), effect() en constructor.
En template:

  {{ a() }}

Uso de setters en lugar de patching.

Comunicación entre Componentes (Old vs New)

🔹 Antes (Angular <16)

@Input() binding
- Padre:

    <child [propchild]="valueFather"></child>
    ```

  * Hijo:

    
```ts
    @Input() propchild: string;
    ```

* **@ViewChild()**

  * Padre accede a métodos del hijo.
* **Service compartido**

### 🔹 Angular 16+

* `@Input({required: true})`
* `transform: BooleanAttribute`
* Inyección:

  
```ts
  const destroyRef = inject(DestroyRef);
  destroyRef.onDestroy(() => {});

Standalone Components con imports.

🔹 Ejemplo añadir data usando signals

const list = signal([]);
list.update(arr => [...arr, newItem]);

Angular 17 — Cambios Fundamentales

1. Estructuras de Control Integradas

🔹 @if / @else

Antes:

*ngIf="userLogin; else userAnom"
<ng-template #userAnom></ng-template>

Ahora:

@if (userLogin) {
	{{ userLogin }}
} @else {
	Usuario anónimo
}

🔹 @switch / @case / @default

Antes con ngSwitch, *ngSwitchCase*…

Ahora:

@switch (levelAccess) {
	@case ('access') { ... }
	@default { ... }
}

🔹 @for / @empty

Antes:

*ngFor
*ngIf="users.length === 0"

Ahora:

@for (user of users; track user.id) {
	{{ user.name }}
} @empty {
	no hay users
}

track por id incluido de serie.

2. Lazy Loading con @defer

🔹 Antes

ViewContainerRef
Limpieza manual

🔹 Ahora

@defer { contenido }
@placeholder
@loading
@error
Usa IntersectionObserver Blog - How to implement Intersection Observer API in Angular

🔹 Triggers

on idle
on immediate
on timer(x)
on viewport(ref)
on interaction(ref)
on hover(ref)
when (promise)
Angular - @defer

Ejemplo:

@defer (on viewport; prefetch on idle) {
	<product-list></product-list>
}

3. Hybrid Render

SSR + SSG (prerender)
CLI: --ssr

4. Nuevos Lifecycle Hooks

afterRender()
afterNextRender() → ideal para SSR
Angular - afterRender

Ejemplo con librería gráfica:

@ViewChild('grafico') graficoRef: ElementRef
ElementRef in Angular - How to use it - DEV Community

5. Compilación & Herramientas

Vite + esbuild por defecto.
Mejoras en devtools y debug.
Visualización del inyector tree: Hierarchical injectors • Angular

6. Standalone por defecto

core:standalone
Eliminación progresiva de NgModules.

Angular 16–17 — Parte 5

Aplicaciones prácticas: To-Do App y Landing Page con Angular 17

1. App de Tareas con Angular 17 (To-Do App)

Repo: https://github.dev/sergiecode/lista-tareas-curso-angular
Construcción de un CRUD básico usando services, localStorage, standalone components, y reactividad mínima.

1.1. Servicio para gestionar localStorage (TaskService)

Centraliza todas las operaciones de lectura/escritura.
Métodos principales:
- getTareas(): string[]
  - Uso de JSON.parse() para convertir el string almacenado a array.
  - Si getItem() devuelve null, retornamos [].
  - Basado en la interfaz Storage de Web API.
    - MDN
    - MDN
    - MDN
  - Uso de type assertion con as:
    - TypeScript- Documentation - Decorators
    - Type Assertion - TypeScript Deep Dive
- agregarTarea(tarea: string)
  - Recibe la cadena.
  - push() en el array actual.
  - setItem() con JSON.stringify() para persistencia.
- eliminarTarea(index: number)
  - Usa splice() para remover 1 elemento en el índice.
  - Luego vuelve a llamar a setItem().

1.2. Gestión de Keys en el almacenamiento

Nombres consistentes para evitar colisiones.
Ejemplo:
- Key: "tareas"
- Value: JSON.stringify(arrayDeTareas)

1.3. Deploy a Netlify

Crear build con Angular CLI.
Configuración típica de SPA:
- Archivo _redirects con /* /index.html 200.

2. Landing Page con Productos — Angular 17

Repo: https://github.dev/sergiecode/landing-page-angular-17
Ejercicio completo con rutas, HTTP client, formularios reactivos, @for, @if, y standalone components.

2.1. Estructura sin NgModules

app.component como base.
Uso de rutas standalone:
- product/:id
- Configuración en app.routes.ts
Ajustes en angular.json:
- Definición de assets.
- Configuración del builder.

2.2. Cliente HTTP + Providers

En main.ts se añade:
- {provide: HttpClient, useFactory: ...}
- O mediante provideHttpClient().

2.3. API Service (api.service.ts)

Inyectar HttpClient usando inject().
Métodos habituales:
- getAllProducts(): Observable<Product[]>
- getProduct(id: number): Observable<Product>
Para el tipado:
- Usar Postman para ver la API.
- Con Quicktype generar model.ts con interfaces.

3. Componente de Productos

Inyectar el service con inject().
Propiedad:
- productList: Product[] = [];
Lógica:
- ngOnInit() -> suscripción a getAllProducts().
Template:
- Recorrido con @for:
  - @for (p of productList; track $index) { ... }
- Mostrar datos con pipes (currency, etc.).
- Click en card o botón para navegar al detalle.

3.1. Navegación programática

Método:

	navigate(id: number): void {
		this.router.navigate(['/product', id]);
	}
	```


---

## 4. Product Detail Component
- Inyectar router y service:
	- `const route = inject(ActivatedRoute);`
	- `const api = inject(ApiService);`
- Lógica:
	- Suscribirse a params.
	- Obtener id.
	- Llamar al método del service.
- Template:
	- Loading con `@if(!loading)`.
	- Operador de seguridad:
		- `product?.price | currency`.

---

## 5. Formulario de Contacto (Reactive Forms)
- Evitar default form submit:
	- `(submit)="enviar($event)"` + `event.preventDefault()`.
- Importaciones necesarias en standalone:
	- `{CommonModule, ReactiveFormsModule}`.
- Definir el formulario:
	- `contactForm!: FormGroup` (nunca null).
- Constructor:
	
```ts
	constructor(private fb: FormBuilder) {
		this.contactForm = this.fb.group({
			email: ['', [Validators.required, Validators.email]],
			message: ['', [Validators.required, Validators.minLength(10)]]
		});
	}
	```


### 5.1. Template del Form
- `form [formGroup]="contactForm"`
- Validaciones:
	- `ngClass="{ 'is-invalid': hasErrors('email', 'required') || hasErrors('email','email') }"`
- Condicionales:
	- `@if (hasErrors('email','required'))`
	- `@if (hasErrors('email','email'))`
	- `@if (hasErrors('message','minlength'))`
- Método en TS:
	
```ts
	hasErrors(field: string, typeError: string) {
		return this.contactForm.get(field)?.hasError(typeError);
	}
	```

- Importar `ngClass`.

---

## 6. Buenas Prácticas Aprendidas
- Tipar siempre las respuestas HTTP.
- Separar lógica en servicios.
- Formularios reactivos > template-driven.
- Navegación con `navigate(['/ruta', id])`.
- Standalone components simplifican bastante.
- Uso de `@for`, `@if`, `@switch` en Angular 17 mejora legibilidad.
- Manejo de loading states.
- Uso correcto de trackeos: `track $index` o `track product.id`.

---


# ---- 
# Angular 18 — Novedades (Parte 1)

## Recursos
- [NOVEDADES ANGULAR 18 | Curso tutorial completo gratis por Sergie Code - YouTube](https://www.youtube.com/watch?v=Qmci2rvN4F8)
- [GitHub - sergiecode/novedades-angular-18](https://github.com/sergiecode/novedades-angular-18)
- [GitHub - sergiecode/angular-18-test](https://github.com/sergiecode/angular-18-test)

---

## 1. Signals en Angular 18
Los **signals** son la base del nuevo sistema de reactividad. Permiten *reactividad transparente*, *composición en cascada* y *tipado estricto*.

## 1.1 Fundamentos
- Angular Signals & Your Architecture- 5 Options - ANGULARarchitects
- Son reactivos y mutables, cambian durante el ciclo de vida del componente.
- Los *values opcionales* son `undefined` por defecto.
- Inputs obligatorios sin valor inicial → `input.required()`.
- *computed(() => …)* permite crear señales derivadas.
- Opción `transform:` permite castear, normalizar o sanitizar valores dentro del input.
	- Ej: *typeof*, *pipes*, conversiones numéricas.
- *alias:* para renombrar inputs/outputs entre padre e hijo.

---

## 2. Inputs y Outputs con Signals

## 2.1 Inputs
- Inputs tradicionales vs *input signals*.
- Declaración:
	
```ts
	myValue = input<number>();
	myRequired = input.required<string>();
	```


## 2.2 Outputs
- Comunicación hijo → padre.
- `output<string>()` define un evento tipado.
- Se emite con `.emit()` → reemplaza al viejo `EventEmitter`.

## 2.3 Output from Observable
- Crear `new Observable<T>` con tipado explícito.
- Nombre sugerido: `onChangeName$`.
- Eventos sin dato → tipo `void`.
- Se puede *adaptar* un observable a un output:
	- con `pipe()`
	- con `subscribe()`
- Configuración con *trigger* interno para emitir según eventos.

---

## 3. Signal Queries
Sustituyen a `@ViewChild`, `@ContentChild`, etc., con un enfoque 100% reactivo.

## 3.1 Tipos de consultas
- `viewChild()`
- `viewChildren()` (readonly array)
- `contentChild()`
- `contentChildren()`

## 3.2 Características
- Asignan un elemento *HTML* o instancia de componente a un **signal**.
- Permiten leer inyectores y metadatos del DOM.
- Usan IDs del template vía `#el`.

### Ejemplo:

```ts
elDiv = viewChild.required<ElementRef<HTMLDivElement>>("el");

Reglas

Si es .required, no puede ser undefined.
No puede declararse dentro del constructor → debe ser propiedad de clase.
Error en tiempo de ejecución si el elemento no existe.

4. Model Inputs (sustituto moderno a ngModel)

Permiten doble binding con signals, más seguro y más claro que ngModel.

4.1 Ejemplo básico

Checkbox con estado reactivo:

  protected checked = model(false);

  toggle() {
  	this.checked.set(!this.checked());
  }

En template:

  <input type="checkbox" [value]="checked()" (change)="toggle()">

5. ng-content y Content Projection

Content projection with ng-content • Angular
Inyectar contenido externo dentro de un componente.
Soporta valores por defecto.
Selección mediante:

  <ng-content select=".hello"></ng-content>

6. Event Prop (Event Properties)

Aparece un sistema formal para escuchar y manejar flujos de eventos.

6.1 Formularios y eventos

Nuevas capacidades con:
- FormControl
- FormGroup
- FormArray
Crear controlador:

  n = new FormControl<string | null>("nombre", Validators.required);

Suscribirse a eventos:

  n.events.subscribe(event => { ... });

7. Rutas y Redirecciones con Funciones

Angular 18 mejora la navegación y manejo de errores.

7.1 Redirección avanzada

redirectTo ahora puede ser una función:

  { path: '', redirectTo: () => '/home' }

7.2 Query Params y acceso a hijos

Se mantienen mecanismos previos, pero ahora se permite lógica interna en el objeto de la ruta.

7.3 Ejemplo de seguridad en rutas

Validar usuario antes de cargar la ruta.
Manejo de errores con función handleError().
Permite mantener vivos componentes antiguos (compatibilidad histórica).

8. Wiz: SSR + Signals + Event Replay

Mejoras del ecosistema para SSR.

8.1 Funcionalidades

Reproducir eventos después de hidratación.
Grabación y re-envío de eventos (como Next.js).
Optimizado para rendimiento.

8.2 Configuración

providers: [
	provideClientHydration(withEventRelay())
]

9. ngOptimizedImage Mejorado

Manejo inteligente de imágenes.
Carga progresiva con blur.
ngSrc optimizado.
Nuevas capacidades para placeholder.

10. Zoneless Change Detection (Experimental)

Permite eliminar Zone.js y manejar detección manualmente.

10.1 Configuración

providers: [
	provideExperimentalZonelessChangeDetection()
]

Debe eliminarse Zone.js de polyfills.
Cambios importantes entre Angular 17 y 18.

11. Partial Hydration y @defer

Uno de los cambios más grandes en SSR desde Angular 17 → estable en 18.

11.1 Qué cambia

Antes: @placeholder se renderizaba en servidor.
Ahora: @defer gobierna todo el ciclo.

11.2 Funcionamiento

@defer (render on server; on viewport) {
	<app-calendar></app-calendar>
}

11.3 Casos de carga diferida

Navegador en reposo.
Elemento al viewport.
Interacción del usuario (hover, click…).

11.4 Prefetch avanzado

@defer (prefetch on hover; prefetch when loggedIn) {
	<my-component />
}

12. Assets en Angular 18

Los estáticos se sirven desde /public/assets.
Se permite path absoluto desde src para gestionar rutas a assets.

Angular 18 — Novedades (Parte 2)

0. Proyecto de Ejemplo

github.dev/sergiecode/novedades-angular-18

Configuración General

CSS y módulos definidos en angular.json.
Providers incluidos desde app.config.ts.
HttpClient ya no se importa en módulos → se usa vía providers.
Migrar zone.js removiendo polyfills en angular.json.
En AppComponent (standalone):

	imports: [CommonModule, RouterOutlet, RouterLink]
	```


---

## 1. Signals: Inputs, Outputs, Queries y Model Inputs

## 1.1 Inputs con Signals
### Conceptos
- Propagación padre → hijo totalmente reactiva.
- Si un input recibe `undefined` → no se renderiza en el hijo.
- Declaración:
	
```ts
	nombre = input<string>();
	apellido = input.required<string>();   // obligatorio
	```

- Standalone:
	
```ts
	imports: [InputChildComponent]
	```


### Alias
- Permiten renombrar inputs al recibir datos del padre:
	
```html
	<child [age]="25" />
	```

	
```ts
	edad = input(0, { alias: 'age' });
	```


### Transform
- Permite lógica adicional al recibir valores:
	
```ts
	deshabilitado = input(false, {
		transform: (value: boolean | string) =>
			(typeof value === 'string') ? value === '' : value
	});
	```

- Acepta boolean o string vacío según lógica del padre.
- Útil para habilitar/deshabilitar desde atributos o expresiones.

### Actualizar señales desde el padre

```ts
texto = signal<string>('Hola');
{{ texto() }}

1.2 Outputs con Signals

Ejemplo práctico: Control de badge

Padre:

badge = signal<number>(0);
hidden = false;

Hijo: emisiones

sumar = output<void>();
delete = output<number>();

Emitir:

this.delete.emit(0);

Padre: handlers

this.badge.update(value => value + 1);
this.badge.update(() => value);

Alternativa sin signals

Doble binding clásico
hidden = !hidden
(click)="toggleBadgeVisibility()"

1.3 Queries con Signals

Tipos

viewChild
viewChildren (readonly)
Selectores #id en el template.

Ejemplos

Template:

<h1 #titulo></h1>
<h2 #soloLectura></h2>

Componente:

h1 = viewChild<ElementRef<HTMLHeadingElement>>("titulo");
soloLectura = viewChildren<ElementRef<HTMLHeadingElement>>("soloLectura");

Modificar:

this.h1()?.nativeElement.textContent = "Nuevo";

Reglas

Si se usa .required, debe existir el elemento → error en runtime.

1.4 Model Inputs (sustituto moderno de ngModel)

Importar model().
Manejo reactivo con signals:

protected checked = model(false);

toggle() {
	this.checked.set(!this.checked());
}

Template:

<input type="checkbox" [value]="checked()" (click)="toggle()">
<span [ngStyle]="{color: checked() ? 'green' : 'red'}">
	{{ checked() }}
</span>

2. ngContent (Content Projection Avanzada)

No requiere relación estricta padre → hijo.
Se puede usar junto a clases específicas.

Hijo:

selector: 'plantilla'

<ng-content select=".saludo"></ng-content>

Padre:

selector: 'app-content',
imports: [PlantillaComponent]

Template:

<div class="saludo">Hola!</div>

Admite valores por defecto si no se pasa contenido.
Proyección múltiple.

3. Imágenes Optimizadas (ngOptimizedImage)

Pruebas

Cambiar velocidad a 3G en devtools para verificar cargas.

Uso

<img ngSrc="img.jpg" width="300" height="300" />

Blur y set de imágenes

<img ngSrc="img.jpg" ngSrcset="img-blur.jpg" />

Provider personalizado

providers: [
	{
		provide: IMAGE_LOADER,
		useValue: (config: ImageLoaderConfig) =>
			`?auto=compress&cs=tinysrgb&w=${config.width}`
	}
]

4. @defer — Carga Diferida Avanzada

4.1 Cargar charts con hover, viewport y timers

Componente:

selector: 'app-defer',
imports: [
	ChartComponent,
	MatProgressSpinnerModule,
	MatTabsModule,
	MatButtonModule,
	MatDividerModule,
	MatIconModule
],

Reactive visibility:

isVisible = signal(false);

Uso de triggers

@defer (on hover; prefetch on timer(10000)) {
	<!-- Contenido -->
} @placeholder() {
	<!-- Placeholder -->
} @loading(minimum 3000) {
	<!-- Loading -->
} @error {
	<!-- Error -->
}

Con condición reactiva

@defer (when isVisible()) { ... }
@if (!isVisible()) {
	<button (click)="isVisible.set(true)">Mostrar</button>
}

En viewport

@defer (on viewport) {
	<app-chart />
} @loading { ... }

5. Formularios Modernos (Forms con eventos Signals)

Validaciones

email, message, touched, pristine, status.

Template:

<form [formGroup]="contactForm" novalidate (submit)="enviar($event)">
	<input
		formControlName="email"
		[ngClass]="{'is-invalid' : hasErrors('email','required') || hasErrors('email','email')}"
	>
</form>

Lógica de errores:

hasErrors(field, type) {
	return this.contactForm.get(field)?.hasError(type) &&
		   this.contactForm.get(field)?.touched;
}

Componente: construcción del formulario

contactForm = this.fb.group({
	email: ['', [Validators.required, Validators.email]],
	message: ['', Validators.required],
});

Suscripciones:

this.contactForm.valueChanges.subscribe(...)
this.contactForm.get('email')?.valueChanges.subscribe(...)

this.contactForm.events.subscribe(event => { ... })

Eventos muestran:

pristine
touched
status
cambios reales del form

6. Navegación Moderna y Redirecciones (Standalone + Redirect Functions)

Navegación desde evento

private _router = inject(Router);

navegate(id: number) {
	this._router.navigate([`/detalle-anterior`, id]);
}

Rutas con children (standalone)

{
	path: 'signals',
	children: [
		{ path: 'inputs', component: InputComponent }
	]
}

Redirección con lógica (novedad)

{
	path: 'detalle-anterior/:id',
	redirectTo: ({ params }) => {
		const errorHandler = inject(ErrorHandler);
		const userId = params['id'];

		if (userId !== '3') return `/detalle-usuario/${userId}`;
		return '/not-found';
	}
}

7. Landing Page Angular 18

github.dev/sergiecode/angular-18-test
zone.js por defecto
configuración del server para SSR

—-

Conceptos y Entrevistas Angular 🔥

1. Diferencias y Fundamentos

Diferencia con AngularJS (v1.x) vs Angular moderno (v2+).
Data Binding
- Two-way binding: [()]
- Unidirectional: [prop] o (event)
Observables
- Reactividad con rxjs.
- Comparación con Promise (complete, next, error).
Dependency Injection
- Inyectar servicios en componentes o módulos.
- Ejemplo: JWT manejo de tokens.
HTTP Interceptor
- Middleware de peticiones HTTP.
- Ejemplo: spinner en llamadas, manipulación de headers o tokens.

2. Angular 17 — Entrevista Senior

Entrevista técnica de Angular - YouTube
Compilación
- AOT (Ahead-of-Time) vs JIT (Just-in-Time)
Modules
- Entry component?
- Shared modules (ej. Angular Material)
Lifecycle Hooks Lifecycle • Angular
- ngOnInit, ngAfterViewInit, ngOnDestroy, etc.
Observables vs Promises
- Suscribir con subscribe() y manejar complete.
Comunicación entre componentes
- Uso de observables para pasar datos.
Lazy Loading
- Optimiza memoria y carga de módulos.
ViewChild vs ContentChild ViewChild • Angular ContentChild • Angular
- ContentChild → elementos proyectados desde otro DOM.
- ViewChild → refs o instancias dentro del template.
Directivas
- Estructurales: *ngIf, *ngFor
- Atributo: [()], dual binding
- Custom directives.
Pipes
- Transforman datos en templates: async, currency, etc.
- Custom pipes con propiedades.
Build & Performance
- ng build, uglify, minificación, bundling, tree shaking.
- Buenas prácticas: usar RxJS correctamente, onDestroy en suscripciones, modo strict.
Patrones de arquitectura
- MVC, Atomic Design, modularidad.

3. Conceptos Entrevista Semi-Senior

Services & HTTP
- Patrón singleton.
- Publicación y suscripción (Pub/Sub).
Environments
- Variables de entorno, configuración según build.
RxJS en Angular
- Unwrapping data from an observable • Angular
- BehaviorSubject - Learn RxJS
- Subject vs BehaviorSubject
- Crear observables: new Observable(), init value.
- Emitir valores con next(), suscribirse con subscribe(), usar async pipe.
- Operadores:
  - tap(), map(), mergeMap(), interval(), pipe()
- Estado y manejo con subjects.
- Operators - Learn RxJS
NgRx (gestión de estado)
- NgRx - @ngrx/store
- Actions, Reducers, Selectors
- Ejemplo práctico: contador con NgRx.
Buenas prácticas
- CamelCase en variables y funciones.
- Declarar variables sobre el constructor.
- Getters al final.
- Espaciado consistente.
- Desuscribirse de observables o usar async pipe.
- Evitar lógica en templates; usar funciones o pipes.
- Minimizar uso de else; preferir if negativo.
- Fechas y formatos Angular.
Asincronía y lazy loading
- async pipe para suscribirse automáticamente.
- Lazy loading y prefetching de módulos.
- Optimización de performance.

4. Entrevista Senior — Arquitectura y Avanzado

Change Detection
- Angular observa cambios automáticamente (NgZone).
- OnPush → detección manual de cambios.
Dependency Injection Avanzado
- Inyección de servicios sin instanciar manualmente.
- Ejemplo: UserService inyectado en constructor de un módulo o componente.
Patrón forRoot
- Para configuración de rutas y módulos compartidos.
Arquitectura
- MVC, Atomic Design, Componentes, Standalone Components.
- DDD (Domain Driven Design) vs TDD vs BDD
  - Introducción a DDD y arquitectura hexagonal con un ejemplo de aplicación en Java
Optimización
- async pipe, lazy loading, prefetching de recursos.
Performance y SSR
- Reducir memoria, lazy load, observables correctamente gestionados.

—-

Omnivore angular

type: list
name: "Notas con #angular en Omnivore"
order:
  - property: date_saved
    direction: desc
columns:
  - file.name
  - date_saved
filters:
  and:
    - file.inFolder("Omnivore")
    - file.hasTag("angular", "Angular")
views:
  - type: table
    name: Table
    order:
      - file.name
      - source_domain
    sort:
      - property: file.mtime
        direction: DESC

—-

Resumenes angular gpt

Angular 17 con Node.js:

Angular 17 con Node.js: Puntos Clave

1. Backend con Node.js y Express

CRUD con Node.js: Crear y manipular datos en un servidor mediante métodos HTTP (GET, POST, PUT, DELETE).
Endpoints y métodos de Express:
- get(), post(), put(), delete() para operaciones CRUD.
- Middleware como express.json() para analizar el cuerpo de las solicitudes.
- Manejo de archivos con fs y lectura/escritura de datos en un archivo JSON.
- Paginación de productos y comunicación con el frontend.
- Pruebas de endpoints con Postman.
Manejo de errores en peticiones con status codes.

2. API Services e Interfaces

API Services: Crear servicios para interactuar con la API, como get, post, put, y delete con HttpClient y Observables.
- Crear interfaces para los datos (Product, PaginationParams).
- Uso de generics (<T>) en servicios para manejar distintos tipos de datos.
Dependency Injection: Inyección de dependencias para servicios y configuraciones en el constructor.

3. Componentes y Decoradores

Creación de componentes: Componentes como ProductComponent, EditPopupComponent, y el uso de Input y Output para la comunicación entre componentes.
- @Input() y @Output() para pasar datos entre componentes y emitir eventos con EventEmitter.
Uso de plantillas:
- Iteración con *ngFor y condiciones con *ngIf.
- Binding de propiedades y eventos ([src], ``).
- Uso de doble binding con [(ngModel)].
PrimeNG: Integración de componentes de UI como p-paginator, Rating, Button, y Dialog.

4. Formularios Reactivos y Validación

FormBuilder: Creación de formularios reactivos con FormBuilder y validación de campos.
- Validators: Validadores predefinidos (Validators.required) y validadores personalizados (ValidatorFn).
- Uso de specialCharacterValidator para validar caracteres especiales con expresiones regulares.
- ngOnChanges y patchValue(): Actualización dinámica de formularios reactivos cuando cambia el producto.
- FormControlName vs. ngModel: Diferencias y cómo se utilizan.

5. Paginación

PrimeNG Paginator: Configuración del componente de paginación (rows, totalRecords, rowsPerPageOptions).
- onPageChange(): Función para manejar los cambios de página, invocando el método fetchProducts() para actualizar los datos según la página seleccionada.
- ViewChild para acceder al paginador desde el código del componente y realizar reset de paginación.

6. Modales y Popups

DialogModule de PrimeNG: Creación de popups para agregar/editar productos.
- Propiedades @Input y @Output para manejar la visibilidad del modal y la confirmación de acciones.
- Two-way binding con [(visible)]="display" para controlar la visibilidad del modal.
- Eventos en modales: onConfirm() y onCancel() para manejar las acciones dentro del modal.

7. Gestión de Productos y CRUD

Servicios para CRUD:
- Métodos en el ProductService para manejar productos: addProduct, editProduct, deleteProduct.
- Uso de observables para realizar peticiones a la API y suscribirse a los resultados con subscribe().
- Emitir eventos con EventEmitter para comunicar el resultado de las acciones de CRUD con otros componentes.
- Mismo nombre para métodos en distintos contextos: Ej. editProduct como función en el servicio y como método en el componente.

8. Pipes Personalizados

TruncateNamePipe y PricePipe:
- Crear pipes personalizados con el CLI (ng generate pipe).
- Transformar valores en plantillas con transform().
- Uso de unknown y valores por defecto en pipes para manejar valores potencialmente nulos o indefinidos.

9. Lazy Loading y Rutas

Lazy Loading de módulos: Definir rutas con loadChildren para cargar módulos de manera diferida.
- Creación de módulos con ng generate module y configuración de rutas.
- RouterLink y routerLinkActive para la navegación y resaltar rutas activas en la UI.

10. Manejo de Errores y Depuración

Manejo de CORS: Configurar el backend para permitir solicitudes de dominios cruzados.
Depuración: Verificación de peticiones HTTP con herramientas como DevTools y Postman para comprobar que las solicitudes y respuestas sean correctas.

Técnicas de Programación Empleadas**

Inyección de dependencias (Dependency Injection).
Destructuring: Extraer propiedades de objetos (ej. const { name, image, price, rating } = this.productForm.value).
Operador lógico OR (||): Para asignar valores por defecto si un valor es falsy (ej. name || '').
Uso de **Observables y RxJS en peticiones HTTP y suscripciones.

Otros Detalles Importantes

Standalone components: Uso de componentes independientes en lugar de declararlos en un módulo.
Arquitectura de módulos: Separar la lógica en módulos organizados (ej. ProductModule, ApiModule).
Uso de ViewChild para interactuar con componentes hijos como el paginador o botones en el DOM. Esta lista incluye los elementos más importantes relacionados con las técnicas de programación empleadas en el curso, y obvia las redundancias para darte un resumen organizado de los conceptos clave.

intro angular 16 17

Angular 16/17: Puntos Clave (Parte 1)

1. Recursos y Repositorios

Recursos del curso: Tutoriales, repositorios GitHub para ejemplos y presentaciones, así como novedades de Angular 16, 17 y 18.
Herramientas y preparativos:
- Instalación de Angular 16.2.10 y actualización a Angular 17.
- Definición de paquetes y estilos en angular.json.

2. Angular Signals y Reactividad

Signals vs. RxJS vs. zone.js: Reactividad moderna en Angular con la API signal() y su impacto en la arquitectura de aplicaciones.
SPA y MVC en Angular: Uso de Angular para construir Single Page Applications (SPA) bajo el patrón Modelo-Vista-Controlador (MVC).

3. Angular Modules y Standalone Components

Modularización vs. Standalone Components:
- Crear aplicaciones usando Standalone Components o con NgModules (--no-standalone para usar app.module.ts).
- Migración de aplicaciones a Standalone.
- Comparación entre standalone y module-based aplicaciones.
Componentes Angular:
- Atomic design: Diseño jerárquico de componentes, creación con ng generate.
- Controladores con TypeScript: Métodos como NgOnInit y la interpolación de datos en plantillas.
- Uso del selector ::host en estilos.

4. Binding y Enlace de Datos

Data Binding en Angular:
- Property Binding y Event Binding: Comunicación unidireccional entre el modelo y la vista.
- Two-way binding con ngModel para sincronización bidireccional.
- Formularios reactivos para manejar datos en tiempo real (se mencionan signals).

5. Decoradores y Metadata

Decoradores como @Input() y @Output():
- @Input(): Pasar datos de componente padre a hijo.
- @Output(): Enviar eventos desde el componente hijo al componente padre mediante EventEmitter.
- Uso de ngModel para vincular inputs en formularios con doble binding.
- Tipado en TypeScript: Uso del operador ? para permitir valores opcionales o vacíos.

6. Servicios e Inyección de Dependencias (DI)

Servicios en Angular:
- Crear servicios para compartir lógica entre componentes.
- Inyección de dependencias (DI): Uso de constructores para inyectar servicios en componentes.
- Alternativas de inyección: constructor vs. inject().
- Ciclo de vida de los datos: Separación de la lógica de los componentes UI.
- Uso de setters y getters para manejar y compartir datos entre componentes.

7. Ejemplos de Componentes y Binding

Ejemplos prácticos:
- Crear un contador simple manejado por eventos.
- Ejemplo de saludo y pregunta usando setters y getters en un servicio.
- Implementación de decoradores para pasar datos entre componentes con @Input() y @Output().

8. Directivas en Angular

Directivas estructurales y personalizadas:
- Directivas estructurales como *ngIf y *ngFor para controlar el DOM.
- Directivas personalizadas: Crear directivas usando @Directive y ElementRef para modificar elementos HTML.
- Usos comunes: Estilos dinámicos, control de permisos, entre otros.

9. Pipes (Tuberías)

Pipes en Angular:
- Funciones transformadoras para formatear datos en plantillas.
- Crear pipes personalizados con @Pipe y usar implements PipeTransform.
- Ejemplos de uso: Pipes de búsqueda y transformación de datos en plantillas.
- Uso de pipes en formateo de texto y manejo de fechas, números, etc.

10. Routing y Navegación

Routing en Angular:
- Router service: Configurar rutas y navegar entre vistas.
- Uso de parámetros de URL y rutas con parámetros (:id, :categoria).
- Métodos para capturar y manejar parámetros de la URL en los componentes con ActivatedRoute.
- Enlace de navegación: Uso de routerLinkActive para resaltar rutas activas en la interfaz.
- Diferencia entre usar routerLinkActive y ngClass para la navegación.

Angular 16/17: Puntos Clave (Parte 2)

1. Navegación y Enrutamiento

Enrutamiento con Angular:
- Uso de Bootstrap para estilos de navegación.
- RouterModule en Angular 16 con NgModules, uso de routerlink="" para manejar rutas en plantillas.
- Enlaces dinámicos en rutas con parámetros ([routerLink]="['/url', 'param']").
- Redirecciones: Configurar el path vacío para redirigir a home.
- Tabla de productos: Uso de *ngFor para listas dinámicas de productos y vinculación con rutas.
  2. Componentes y Detalles de Productos
Product Detail Component:
- ActivatedRoute: Uso de _route para acceder a parámetros de ruta y obtener el ID de un producto.
- Find(): Uso de find() para buscar productos en una lista.
- Manejo de cargas asincrónicas con indicadores de carga (loading) y setTimeout para simular la respuesta del backend.

3. Directivas Estructurales

Directivas como *ngFor y ngIf: Manejar listas y condiciones dinámicas.
- ngSwitch, ngClass, ngStyle para manipular estilos y clases en plantillas.
- ng-container como fragmento sin generar elementos adicionales en el DOM.
- ng-template: Para crear plantillas reutilizables y condicionales.

4. Formularios

Formularios basados en plantillas:
- ngModel y ngSubmit para la vinculación de datos bidireccional y manejo de eventos de formulario.
- Validaciones: Uso de *ngIf para mostrar mensajes de error en los campos de entrada cuando no son válidos o están tocados.
Formularios reactivos:
- Uso de FormBuilder, FormGroup y Validators para crear formularios controlados por código.
- hasError() para validar y mostrar mensajes de error personalizados en el formulario.
- Ejemplo: Formulario de contacto con validación de correo electrónico y uso de Bootstrap para errores de estilo.

5. Ciclo de Vida de los Componentes (Lifecycle Hooks)

Ciclo de vida de Angular:
- ngOnChanges: Detectar cambios en las propiedades de entrada (@Input) desde el componente padre.
- ngOnInit: Inicializar datos del servicio y gestionar estados en tiempo de carga.
- ngOnDestroy: Desuscribirse de observables y limpiar recursos.
- Otros hooks importantes: ngDoCheck, ngAfterViewInit, ngAfterViewChecked, ngAfterContentInit.

6. HTTP Client y API

Uso de HttpClientModule para manejar peticiones HTTP a través de servicios.
- Peticiones GET y POST usando observables (Observable<any>).
- Inyección de servicios en componentes para acceder a métodos API.
- Ejemplo: Conexión a una API falsa (Fake Store API) para obtener productos y manejar datos.
- Suscripción a observables usando subscribe() para manejar datos y errores de forma asíncrona.

7. Estados y Observables en Angular

Manejo de estados y reactividad:
- BehaviorSubject: Tipo especial de observable que emite el último valor a los suscriptores cuando se suscriben.
- Signals en Angular 16:
  - Uso de signal(), computed() y effect() para gestionar el estado de manera reactiva.
  - Mutación de arrays: Uso de mutate() para modificar valores de arrays en signals.
  - Uso de signals para escuchar cambios y actualizar automáticamente la UI.

8. Lazy Loading y SSR

Lazy Loading con Angular 17:
- Nuevas estructuras de control como @if, @for y @switch que simplifican el código.
- Uso de @defer para cargar contenido bajo demanda con triggers como on idle, on interaction, on viewport.
- Intersección de Observadores (IntersectionObserver) para cargar contenido en función de la visibilidad del elemento.

9. Standalone Components y Signals en Angular 16/17

Standalone components: Eliminación de NgModules al utilizar componentes autónomos.
Signals vs Observables: Uso de signal() para manejar cambios de estado en Angular 16 en lugar de rxjs y observables tradicionales.

10. Proyectos Prácticos

App de tareas con Angular 17:
- Uso de LocalStorage para almacenar y gestionar tareas.
- Métodos de manipulación de datos: getItem(), setItem() y splice() para añadir o eliminar tareas.
- Subir la aplicación a Netlify para despliegue.
Landing page de productos con Angular 17:
- Conexión a una API de productos para mostrar una lista de productos.
- Uso de routerLink para la navegación entre productos y detalles.
- Formulario de contacto con validación y manejo de errores en tiempo real usando ReactiveForms.

11. Diferencias entre Angular 16 y versiones anteriores

Mejoras en Angular 16:
- Uso de @input({required:true}) para evitar que se pasen valores nulos o indefinidos.
- inject() en lugar de constructores para manejar inyecciones de dependencias.
- Nueva estructura de control @if, @for y @switch para un código más limpio.
- Mejoras en el manejo de @defer para cargar contenido de forma eficiente y mejorar el rendimiento.

12. Mejoras en Angular 17

Controladores integrados: Uso de estructuras de control más sencillas (@if, @for, @switch).
Lazy Loading mejorado: Uso de @defer con IntersectionObserver y triggers personalizados.
Nuevas APIs y Hooks:
- afterRender() y afterNextRender(): Utilizados para la renderización y aplicaciones SSR (Server-Side Rendering).

novedades angular 18

1. Signals y Reactividad

Angular Signals:
- Signals en Angular permiten manejar el estado de manera más eficiente y reactiva.
- signal(): Almacena un valor reactivo.
- computed(): Calcula valores basados en otros signals.
- effect(): Ejecuta efectos colaterales cuando cambian los signals.
- Se pueden usar en lugar de rxjs para la reactividad.
- Soporta cadena en cascada de signals (cuando un signal depende de otro).
- Transformaciones y validaciones: Uso de la propiedad transform para manipular valores de entrada.

2. Outputs y Observables

Outputs y Observables:
- Uso de output<string>() para emitir eventos desde el hijo al padre, similar a EventEmitter.
- Observables personalizados: Crear observables tipados con new Observable para emitir eventos reactivos.
- Uso de pipes y subscribe para manejar flujos de datos.

3. Signal Queries

Signal Queries:
- Reemplazan el uso de variables tradicionales con signals para consultas en el DOM.
- Acceso a elementos del DOM usando ViewChild, ViewChildren y ContentChild con signals.
- Ejemplo: viewChild<ElementRef<HTMLDivElement>>("el").nativeElement.
- Los signals pueden reaccionar automáticamente a los cambios en los elementos del DOM.

4. Model Input (Alternativa a `ngModel`)

Model Input:
- Nueva alternativa a ngModel para doble binding.
- Uso de model() para manejar inputs reactivos (por ejemplo, un checkbox).
- Ejemplo: checked = model(false) y doble binding en la plantilla [value]="checked()".
- Método toggle() para modificar el valor del input desde el componente.

5. NgContent y Content Projection

ng-content:
- Permite insertar contenido en un componente desde el exterior.
- Útil para componentes reutilizables que aceptan contenido dinámico.
- Content projection con ng-content y selectores CSS (select=".clase").
  6. Optimización de Imágenes
NgOptimizedImage:
- Mejora el rendimiento al cargar imágenes con ngSrc y ngSrcset.
- Uso de propiedades como priority, width y height para optimizar imágenes.
- Proveedor personalizado para cargar imágenes desde un servidor optimizado.
- Ejemplo: Configurar un Image Loader para optimizar la carga según el ancho de la imagen.

7. Detección de Cambios sin `zone.js`

Zoneless Change Detection:
- Angular 18 introduce una forma experimental de detectar cambios sin zone.js.
- Configuración en angular.json: provideExperimentalZonelessChangeDetection().
- Mejora el rendimiento al eliminar la necesidad de zone.js.

8. Hidratación Parcial y `@defer`

Hidratación Parcial y Defer:
- Nueva API @defer para renderizar contenido de forma diferida.
- Condiciones como on hover, on viewport y on timer permiten controlar cuándo se carga un componente.
- Ejemplo: @defer (on hover; prefetch on timer(10000)) { ... }.
- Mejora el rendimiento en SSR (Server-Side Rendering) y CSR (Client-Side Rendering).
- Soporte para loading states con @loading, @placeholder y manejo de errores con @error.

9. Redirección en Rutas con Funciones

Rutas Dinámicas:
- redirectTo puede aceptar una función que devuelve una URL dinámica basada en parámetros.
- Ejemplo: path: 'detalle/:id', redirectTo: ({ params }) => ....
- Uso de inject() dentro de rutas para manejar la lógica directamente en la configuración.

10. Formas Avanzadas y Validaciones

Reactive Forms:
- Nuevas validaciones y mejoras en formularios reactivos.
- Soporte para suscripción a eventos de formulario con valueChanges y events.
- Ejemplo: this.contactForm.events.subscribe((event) => { ... }) para manejar eventos como pristine o touched.
- ngClass con condicionales para errores: [ngClass]="{'is-invalid': hasErrors('email', 'required')}".

11. SSR (Server-Side Rendering)

SSR con Hydration:
- Angular 18 mejora la hidratación parcial de componentes en el lado del servidor.
- Uso de provideClientHydration para eventos SSR.
- Ejemplo de integración de signals con SSR para mejorar el rendimiento.

12. Ejemplos Prácticos de Angular 18

Landing Page Angular 18:
- Proyecto de ejemplo en GitHub con novedades de Angular 18.
- Uso de signals, @defer, optimización de imágenes, y componentes standalone.
- Configuración de HTTP Client y zone.js en appconfig.

Resumen Técnico

Signals: Nueva API reactiva para manejar el estado sin rxjs. Incluye signal(), computed(), y effect().
Outputs y Observables: Creación de eventos personalizados con output() y gestión avanzada de observables.
Signal Queries: Uso de ViewChild y ViewChildren con signals para manejar elementos del DOM.
Model Input: Alternativa a ngModel para doble binding reactivo.
Content Projection con ng-content: Para insertar contenido dinámico en componentes.
Optimización de Imágenes: Con NgOptimizedImage y propiedades personalizadas.
Detección de Cambios sin zone.js: Configuración experimental para mejorar el rendimiento.
@defer y SSR: Renderización diferida y mejoras en la hidratación parcial en aplicaciones con SSR.
Formularios Reactivos: Validaciones avanzadas y suscripción a eventos con valueChanges y events.

Este resumen incluye las novedades de Angular 18 junto con las mejores prácticas en reactividad, optimización de imágenes, manejo de rutas y formularios, brindando una visión clara y técnica de las mejoras y nuevas características.

—-

Angular 2025 — Conceptos Avanzados y Tendencias 🔥

1. Arquitectura Moderna

Standalone Components y Modules
- Angular 17/18 elimina la necesidad de NgModules para la mayoría de los casos.
- Permite importar componentes, directivas y pipes directamente en imports.
Micro Frontends
- Integración de aplicaciones independientes usando Module Federation.
- Facilita escalabilidad y despliegue independiente de partes de la app.
Atomic Design
- Organización de componentes en átomos, moléculas, organismos y plantillas.
SSR (Server-Side Rendering) Mejorado
- Hidratación parcial con @defer y control de renderizado basado en eventos, hover o viewport.
- Optimización de carga y reducción de tiempo hasta contenido interactivo (TTI).

2. Reactividad y Signals

Signals como núcleo reactivo
- Sustituyen en muchos casos a RxJS para estados simples.
- signal<T>() para crear estados reactivos, computed() para valores derivados.
- Soporte de transform para conversión de tipos y validación en inputs.
Inputs y Outputs modernizados
- input.required<T>() asegura presencia de datos en componentes hijos.
- Alias para renombrar props en el padre ({ alias: 'age' }).
- output<void>() para emisiones sin payload, o con tipo específico para comunicación padre-hijo.
Signal Queries
- viewChild, viewChildren, contentChild, contentChildren tipados con signals.
- Acceso seguro a elementos con ElementRef y required para evitar errores en runtime.

3. Renderizado y Optimización

@defer y @placeholder
- Renderiza contenido diferido en servidor o navegador según condiciones.
- Prefetch de recursos bajo triggers (on hover, on viewport, timers).
NgOptimizedImage
- Optimización de imágenes nativa con ngSrc y ngSrcSet.
- Configuración de prioridad, dimensiones y placeholders difuminados.
- Carga adaptativa según ancho y red del dispositivo.
Detección de cambios sin Zone.js
- provideExperimentalZonelessChangeDetection() para rendimiento extremo.
- Control manual de actualización de vistas sin dependencia de zonas.

4. Formularios y Validaciones

FormControl, FormGroup y FormArray
- Suscripción a eventos de cambios valueChanges y events para reactividad avanzada.
- Validaciones dinámicas y personalizadas usando Validators y formControlName.
Forms y Signals
- Integración de signals con inputs para doble binding moderno.
- Eventos emitidos en tiempo real para estado de validación (pristine, touched, dirty).

5. Rutas y Navegación

Redirecciones dinámicas
- redirectTo acepta funciones que reciben parámetros de ruta.
- Manejo de errores y rutas no encontradas (not-found) desde funciones inyectadas.
Standalone routing
- Configuración de rutas y children sin NgModules.
- Prefetching y lazy loading de componentes y módulos de manera granular.

6. Buenas Prácticas 2025

Arquitectura desacoplada con componentes y servicios reutilizables.
Uso de signals para estados simples; RxJS para flujos complejos.
Hydration parcial y defer para optimizar SSR y tiempo hasta interactividad.
Optimización nativa de assets (imágenes, videos, fuentes).
Estilo de código limpio: camelCase, getters/setters, suscripción segura y async pipe.

7. Herramientas y Ecosistema

Angular CLI 18+ con soporte completo a signals y hydration parcial.
Integración con Chart.js, Material, Tailwind y librerías modernas.
Testing unitario y E2E usando Jasmine, Jest o Cypress.
Netlify, Vercel y otras plataformas para despliegue moderno y SSR.

Angular 19 — Novedades y Características (2025)

1. Datos de la versión

Angular 19 es una versión LTS según el plan de versiones. :contentReference[oaicite:1]{index=1}
Ciclo de lanzamientos: Angular publica versiones mayores cada ~6 meses. :contentReference[oaicite:2]{index=2}

2. Principales Novedades de Angular 19

2.1 Reactividad y Signals

Las API de Signals (como signal(), effect() y linkedSignal) siguen evolucionando. :contentReference[oaicite:3]{index=3}
Reinforcement del modelo reactivo: mayor integración con el framework para gestionar estado local sin RxJS en casos simples.

2.2 Detección de Cambios Sin Zone.js (Zoneless)

Angular 19 continúa explorando el modo zoneless (sin Zone.js), lo que permite aplicaciones más ligeras y un control más explícito del ciclo de detección de cambios. :contentReference[oaicite:4]{index=4}
Esta característica está en “preview” pero ha avanzado bastante según la comunidad. :contentReference[oaicite:5]{index=5}

2.3 Redirecciones Funcionales en el Router

redirectTo ya no tiene que ser una cadena literal: puede ser una función que devuelve rutas dinámicas según condiciones de runtime. :contentReference[oaicite:6]{index=6}
Esto permite lógica de navegación más compleja (por ejemplo, rutas basadas en estado del usuario, permisos o parámetros).

2.4 Vistas Diferibles (“Deferrable Views”)

Se mantiene la capacidad de diferir la renderización de partes del UI usando @defer.
Permite cargar componentes solo cuando son necesarios (on viewport, interacción, etc.), mejorando el rendimiento y la carga inicial. :contentReference[oaicite:7]{index=7}
Esta API es estable desde Angular 18. :contentReference[oaicite:8]{index=8}

2.5 Soporte Estable para Material Design 3

Angular Material 3 (Material You) ya es estable en esta versión. :contentReference[oaicite:9]{index=9}
Mejora de temas, rendimiento y accesibilidad para componentes UI modernos.

2.6 Server-Side Rendering (SSR) y Hidratación

Mejoras en SSR, con event replay: los eventos disparados en el cliente se pueden reproducir después de la hidratación. :contentReference[oaicite:10]{index=10}
Apoyo a i18n (internacionalización) durante la hidratación. :contentReference[oaicite:11]{index=11}

2.7 Soporte de TypeScript

Angular 19 es compatible con TypeScript 5.4 (u versiones superiores según fuentes). :contentReference[oaicite:12]{index=12}
Aprovecha nuevas características del lenguaje para mejorar el tipado y la productividad.

2.8 Mejoras en Build y CLI

Soporte para ECMAScript Modules (ESM), lo que mejora la modularidad y carga de código. :contentReference[oaicite:13]{index=13}
Caché más inteligente en Angular CLI → builds más rápidas y eficientes. :contentReference[oaicite:14]{index=14}
Operaciones de compilación optimizadas: menor tamaño de bundle, compilación AOT más eficiente. :contentReference[oaicite:15]{index=15}

2.9 Proyección de Contenido (ng‑content)

Ahora se puede definir contenido de fallback para <ng-content> cuando no se proyecta nada, lo cual mejora la reutilización de componentes. :contentReference[oaicite:16]{index=16}

2.10 Herramientas de Debug y DevTools

Mejora del debugging en SSR / hidratación: mayor visibilidad del estado de hidratación en DevTools. :contentReference[oaicite:17]{index=17}
Perfilado más profundo del rendimiento y del estado reactivo (signals).

3. Por Qué Considerar Angular 19 en 2025

Rendimiento: gracias a deferrable views y zoneless, puedes mejorar la carga inicial y la reactividad.
Estado reactivo moderno: Signals ofrecen una alternativa ligera a RxJS para estado local.
Mejor experiencia de desarrollo: con ESM, CLI optimizado y mejores DevTools.
SSR madura: con event replay y mejor soporte i18n.
UI moderna: Material 3 estable y proyección de contenido más flexible.

4. Riesgos y Consideraciones para Actualizar

Algunas APIs (como zoneless) pueden seguir en preview → evaluar su uso según proyecto.
Migrar puede requerir actualizar dependencias (Material, librerías de terceros).
Requiere TypeScript relativamente reciente.
Verificar compatibilidad con herramientas de build o bundling existentes.

Angular

Proyectos

Angular 19

Testing

Docs y recursos

Apuntes Angular 🔥

Tareas generales

Recomendaciones Angular y entorno

Código / Ejemplos técnicos

Standalone Component básico

Configuración mínima provideRouter

Ejemplo signals Angular 18–19

—-

Curso Angular

Intro a Angular: Conceptos base

Angular 6: Conceptos fundamentales

Estructura de proyectos y rutas

Observables y RxJS

Detección de cambios (Angular 17–19)

Autenticación y Refresh Token (Angular 18)

Conceptos generales

Backend + Frontend

Servicio de usuarios

Interceptor de autenticación (auth.interceptor.ts)

Diferencias clave

Carga diferida (Lazy)

Export vs Imports

Flags CLI

Menú en Header

Estructura modular y servicios

Problemas visuales: overflow del nombre + símbolo de moneda

Opciones antiguas

Solución profesional: Pipes

Crear pipes

Usos en template

truncate-name.pipe.ts

price.pipe.ts

Validadores y Formularios (Reactive Forms)

FormBuilder

Validador personalizado

OnChanges + patchValue (nuevo enfoque)

Template

ngModel vs formControl

Evitar undefined / null

—-

Angular 16–17

1. Recursos Base y Repositorios

2. Reactividad en Angular: Signals vs Zone.js vs RxJS

3. Arquitectura: SPA, MVC y Preparación de Proyecto

4. Angular Modules vs Standalone Components

4.1 Conceptos clave

4.2 Diferencias esenciales

5. Componentes y Organización (Atomic Design)

6. Data Binding (uno de los pilares de Angular)

6.1 Tipos

6.2 Formularios

7. Metadata, Decoradores y DI

8. Inputs: Comunicación Padre → Hijo

2.3 Declaración

3. Routing Avanzado (Angular 16–17)

3.1 Rutas básicas

3.2 Navegación en plantilla

3.3 Activar clases según la ruta

3.4 Capturar parámetros en el componente

3.5 Capturar parámetros múltiples

3.6 Navegación programática

4. Construir Sistema de Navegación

4.1 Configurar estilos de Bootstrap

4.2 ng-bootstrap

4.3 Routing con Modules (Angular 16 clásico)

5. Tabla de Navegación de Productos

5.1 Estática

5.2 Dinámica con ngFor

6. Componente de Detalles de Producto

6.1 Estructura

6.2 Captura de ID

6.3 Evitar undefined

6.4 Loading mientras llega el backend

6.5 Angular 17 y ActivatedRoute sin constructor

7. Structural Directives Repaso Completo

Interceptor de autenticación (`auth.interceptor.ts`)

`ngModel` vs `formControl`