Directiva para ajustar automáticamente la altura de un contenedor a su contenido interno y controlar el scroll centrado. Diseñada para Angular 20 y migrada desde `mf-common`.
npm install @cbm-common/resize-container-directivemf-common.
CbmResizeContainerDirective observa cambios en el DOM del elemento (mutations) y adapta la altura del contenedor padre para ajustarse al contenido. Opcionalmente puede centrar el scroll horizontalmente y reaccionar a eventos personalizados de "resize".
projects/resize-container-directive/src/lib/resize-container.directive en los componentes de prueba.
bash
npm install @cbm-common/resize-container-directive
`
Asegúrate de tener en peerDependencies versiones compatibles de Angular (ver package.json).
API - Atributos / Inputs
Aplica la directiva al elemento que actúa como contenedor exterior (el hijo directo contendrá el contenido):
- cbmResizeContainerDirective - selector de la directiva.
- resizeHeight (string | number) - valor numérico adicional que se suma al scrollHeight del contenido (por defecto 15).
- observerAttributes (boolean) - si observar atributos con MutationObserver (false por defecto).
- child-list (boolean | 'true' | 'false') - si observar childList (true por defecto).
- sub-tree (boolean | 'true' | 'false') - si observar subtree (true por defecto).
- center-scroll (boolean) - si centrar el scroll horizontal al inicializar y cuando cambie (false por defecto).
- resizeEvent (string) - nombre de evento personalizado para forzar recalculo (opcional).
$3
`html
`
$3
`ts
import { Component } from '@angular/core';
import { CbmResizeContainerDirective } from 'projects/resize-container-directive/src/lib/resize-container.directive';
@Component({
standalone: true,
imports: [CbmResizeContainerDirective],
template:
})
export class DemoComponent { items = [1,2,3]; }
`
> Nota: en monorepo preferimos importar la directiva desde projects/.../src/lib/... durante el desarrollo.
Desarrollo y build
Desde la raíz del workspace:
`powershell
compilar la librería
npx -p @angular/cli@20 ng build resize-container-directive
(opcional) servir la app de ejemplo
npm start
`
Pruebas
Ejecuta las pruebas unitarias:
`bash
ng test resize-container-directive
`
Publicación
1. Ejecuta ng build resize-container-directive.
2. Ve a dist/resize-container-directive.
3. Ejecuta npm publish (o publica en tu registry privado).
Migración y compatibilidad
- Esta versión apunta a Angular 20.1.5 como peerDependencies. Si migras desde Angular 17 o versiones anteriores, revisa el uso de signals, computed y effect en la directiva.
Contribuciones
Pull requests y correcciones son bienvenidas. Sigue las convenciones del monorepo y ejecuta ng test antes de enviar PR.
Licencia
Licencia del proyecto (ver package.json` del monorepo).