diff --git a/apps/front/src/app/libs/auth/directives/README.md b/apps/front/src/app/libs/auth/directives/README.md
index a3eaf3c..fc099d6 100644
--- a/apps/front/src/app/libs/auth/directives/README.md
+++ b/apps/front/src/app/libs/auth/directives/README.md
@@ -1,211 +1,50 @@
-# Directivas de Permisos Angular
+# Permission rendering — control flow nativo de Angular 21
-Este directorio contiene directivas estructurales de Angular para mostrar/ocultar elementos basado en los permisos del usuario.
+> Las cuatro directivas estructurales que vivían aquí
+> (`*appHasPermission`, `*appHasAnyPermission`, `*appHasAllPermissions`,
+> `*appIfLoggedIn`) **se han eliminado**. El barrel `index.ts` ya no
+> existe. Migra a `@if` siguiendo la tabla de `USAGE.md`.
-## Directivas Disponibles
+Angular 17+ trae `@if`, `@for` y `@switch` integrados en el lenguaje de
+plantillas. Son type-safe, no requieren `import`, no necesitan
+`TemplateRef + ViewContainerRef` y eliminan de raíz la familia de bugs
+por nombre-de-input ≠ selector estructural (caso real: un `@Input()`
+llamado `hasPermission` no recibía el valor que el azúcar
+`*appHasPermission="X"` desugaring intentaba pasar via
+`[appHasPermission]="X"`).
-### 1. `*hasPermission`
-
-Muestra el elemento solo si el usuario tiene el permiso específico.
-
-```html
-
-
-
-
-
Panel de Administración
-```
-
-### 2. `*hasAnyPermission`
-
-Muestra el elemento si el usuario tiene cualquiera de los permisos especificados.
-
-```html
-
-
-
-
-
Panel de Edición
-```
-
-### 3. `*hasAllPermissions`
-
-Muestra el elemento solo si el usuario tiene todos los permisos especificados.
+Consumí los helpers que ya expone `AuthService`:
```html
-
-
Panel Avanzado
-
-
- Admin
+@if (auth.hasPermission(Permission.ADMIN)) {
+
+} @if (auth.hasAnyPermission([Permission.WRITE_SOME_ENTITY, Permission.ADMIN])) {
+
+} @if (auth.hasAllPermissions([Permission.READ_SOME_ENTITY, Permission.WRITE_SOME_ENTITY])) {
+
+} @if (auth.isLoggedIn()) {
+
+} @else {
+
+}
```
-## Uso en Componentes
-
-### Importar las Directivas
-
-```typescript
-import { Component } from '@angular/core';
-import { Permission } from '@dto';
-import { HasPermissionDirective, HasAnyPermissionDirective, HasAllPermissionsDirective } from '@front/app/libs/auth/directives';
+`auth.isLoggedIn()`, `auth.hasPermission()`, `auth.hasAnyPermission()` y
+`auth.hasAllPermissions()` son métodos públicos de `AuthService`. En tu
+componente standalone:
+```ts
@Component({
- selector: 'app-example',
+ selector: 'app-foo',
standalone: true,
- imports: [HasPermissionDirective, HasAnyPermissionDirective, HasAllPermissionsDirective],
- template: `
-
-
-
-
Panel de Administración
-
-
-
-
-
-
Herramientas de Edición
-
-
-
-
-
-
-
Funciones Avanzadas
-
-
-
- `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [TranslocoModule],
+ templateUrl: './foo.component.html',
})
-export class ExampleComponent {
- Permission = Permission; // Para usar en el template
+export class FooComponent {
+ readonly auth = inject(AuthService);
+ readonly Permission = Permission; // exponer enum para usar en template
}
```
-### Uso con NgModule
-
-Si estás usando NgModule en lugar de componentes standalone:
-
-```typescript
-import { NgModule } from '@angular/core';
-import { AuthModule } from '@front/app/libs/auth';
-
-@NgModule({
- imports: [AuthModule], // Las directivas se exportan automáticamente
- // ...
-})
-export class YourModule {}
-```
-
-## Ejemplos Prácticos
-
-### Barra de Navegación Condicional
-
-```html
-
-```
-
-### Botones de Acción Condicionales
-
-```html
-
-
Usuario: {{ user.name }}
-
-
-
-
-
-
-
-
-
-
-```
-
-### Formularios Condicionales
-
-```html
-
-```
-
-## Características Técnicas
-
-### Reactividad
-
-Las directivas son reactivas y se actualizan automáticamente cuando:
-
-- El usuario inicia sesión
-- El usuario cierra sesión
-- Los permisos del usuario cambian
-
-### Performance
-
-- Las directivas solo se evalúan cuando es necesario
-- No hay suscripciones innecesarias a observables
-- El DOM se actualiza eficientemente
-
-### Type Safety
-
-- Soporte completo para TypeScript
-- IntelliSense en IDEs
-- Validación en tiempo de compilación
-
-## Notas Importantes
-
-1. **Autenticación Requerida**: Las directivas asumen que el usuario está autenticado. Para contenido que requiere autenticación, combina con `*ngIf="authService.isLoggedIn$ | async"`.
-
-2. **Permisos Vacíos**: Si se pasa un array vacío a `*hasAnyPermission` o `*hasAllPermissions`, el elemento no se mostrará.
-
-3. **Valores Null/Undefined**: Si se pasa `null` o `undefined`, el elemento no se mostrará.
-
-4. **Compatibilidad**: Las directivas son compatibles con Angular 17+ y componentes standalone.
-
-## Troubleshooting
-
-### El elemento no se muestra cuando debería
-
-1. Verifica que el usuario esté autenticado
-2. Confirma que el usuario tenga los permisos correctos
-3. Revisa la consola para errores de JavaScript
-
-### El elemento se muestra cuando no debería
-
-1. Verifica que los permisos se estén pasando correctamente
-2. Confirma que el servicio de autenticación esté funcionando
-3. Revisa la lógica de permisos en el backend
+Ver `USAGE.md` para la tabla antes → después de cada directiva.
diff --git a/apps/front/src/app/libs/auth/directives/USAGE.md b/apps/front/src/app/libs/auth/directives/USAGE.md
index 3f795b1..ff3c5be 100644
--- a/apps/front/src/app/libs/auth/directives/USAGE.md
+++ b/apps/front/src/app/libs/auth/directives/USAGE.md
@@ -1,194 +1,120 @@
-# Directivas de Permisos Angular - Guía de Uso
+# Guía de migración — directivas → control flow nativo
-## Directivas Disponibles
+Esta guía explica cómo migrar consumidores que usaban las antiguas
+directivas estructurales `*appHasPermission`, `*appHasAnyPermission`,
+`*appHasAllPermissions` y `*appIfLoggedIn` al control flow nativo de
+Angular (`@if`).
-### 1. `*appHasPermission`
+## Tabla 1-a-1
-Muestra el elemento solo si el usuario tiene el permiso específico.
+| Antes (directiva estructural) | Después (`@if` nativo) |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| `…` | `@if (auth.hasPermission(Permission.ADMIN)) { … }` |
+| `…` | `@if (auth.hasAnyPermission([Permission.ADMIN, Permission.WRITE_SOME_ENTITY])) { … }` |
+| `…` | `@if (auth.hasAllPermissions([Permission.READ_SOME_ENTITY, Permission.WRITE_SOME_ENTITY])) { … }` |
+| `…` | `@if (auth.isLoggedIn()) { … }` |
+| `…` | `@if (!auth.isLoggedIn()) { … }` |
+| Combinado: positivo + negativo | `@if (auth.isLoggedIn()) { … } @else { … }` |
-```html
-
-
-
-
-
Panel de Administración
-```
-
-### 2. `*appHasAnyPermission`
-
-Muestra el elemento si el usuario tiene cualquiera de los permisos especificados.
-
-```html
-
-
-
-
-
Panel de Edición
-```
-
-### 3. `*appHasAllPermissions`
-
-Muestra el elemento solo si el usuario tiene todos los permisos especificados.
-
-```html
-
-
Panel Avanzado
-
-
- Admin
-```
-
-## Uso en Componentes
-
-### Importar las Directivas
+## Componente standalone
-```typescript
-import { Component } from '@angular/core';
+```ts
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { Permission } from '@dto';
-import { HasPermissionDirective, HasAnyPermissionDirective, HasAllPermissionsDirective } from '@front/app/libs/auth/directives';
+import { AuthService } from '@front/app/libs/auth/services/auth.service';
@Component({
selector: 'app-example',
standalone: true,
- imports: [HasPermissionDirective, HasAnyPermissionDirective, HasAllPermissionsDirective],
- template: `
-
-
-
-
Panel de Administración
-
-
-
-
-
-
Herramientas de Edición
-
-
-
-
-
-
-
Funciones Avanzadas
-
-
-
- `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [],
+ templateUrl: './example.component.html',
})
export class ExampleComponent {
- Permission = Permission; // Para usar en el template
+ readonly auth = inject(AuthService);
+ readonly Permission = Permission; // exponer para que el template lo lea
}
```
-## Ejemplos Prácticos
+Ya no hace falta importar ninguna directiva — `@if` está en el lenguaje
+de plantillas — y `CommonModule` deja de ser necesario si era lo único
+que usabas para `*ngIf` / `*ngFor`.
-### Barra de Navegación Condicional
+## Ejemplos prácticos migrados
+
+### Navbar condicional
```html
```
-### Botones de Acción Condicionales
+### Botones de acción por permiso
```html