Referencia API

Aquí tienes el contrato completo de portal: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta portal a tu gusto con 15 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`animation`	`boolean`	—	Si es true, la apertura y el cierre del portal se animarán. Por defecto: true
`ariaLabelledBy`	`string`	—	Valor del atributo `aria-labelledby` a establecer en la ventana del portal
`ariaDescribedBy`	`string`	—	Valor del atributo `aria-describedby` a establecer en la ventana del portal
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Callback justo antes de que el portal sea descartado. Devuelve false para evitar el descarte.
`container`	`string \| HTMLElement`	—	Un selector que especifica el elemento al que se deben añadir todas las nuevas ventanas del portal. Si no se especifica, será `body`.
`injector`	`Injector`	—	El `Injector` a usar para el contenido del portal con el fin de habilitar la inyección de dependencias.
`keyboard`	`boolean`	—	Si es true, el portal se cerrará al pulsar la tecla Escape. Por defecto: true
`scrollable`	`boolean`	—	Contenido del portal con desplazamiento (false por defecto).
`windowClass`	`string`	—	Una clase personalizada para añadir a la ventana del portal para estilos y posicionamiento personalizados.
`portalDialogClass`	`string`	—	Una clase personalizada para añadir al contenedor del diálogo del portal.
`portalContentClass`	`string`	—	Una clase personalizada para añadir al contenedor envolvente del contenido del portal.
`headerSelector`	`string`	—	Selector personalizado para el elemento de cabecera de la ventana del portal. Útil para apuntar a secciones específicas del portal.
`footerSelector`	`string`	—	Selector personalizado para el elemento de pie de la ventana del portal. Útil para apuntar a secciones específicas del portal.
`dismissSelector`	`string`	—	Selector personalizado para los elementos que pueden activar el descarte de la ventana del portal. Por defecto: `[data-dismiss="portal"]`
`closeSelector`	`string`	—	Selector personalizado para los elementos que pueden activar el cierre de la ventana del portal. Por defecto: `[data-close="portal"]`

Outputs

Todavía no hay outputs documentados.

Métodos

Controla portal desde el código — 5 métodos en su superficie programática.

Nombre	Firma	Devuelve	Descripción
`HubPortal.open`	`open<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Abre una nueva ventana de portal con el contenido especificado (tipo de componente, TemplateRef o string) y las opciones, y devuelve un HubPortalRef para controlarla. Los componentes de contenido pueden inyectar HubActivePortal para cerrar o descartar el portal desde dentro.
`HubPortal.toggle`	`toggle<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Descarta todos los portales abiertos actualmente con la razón 'toggle', espera a que estén completamente ocultos y después muestra un nuevo portal con el contenido y las opciones dados. Devuelve la referencia al nuevo portal.
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	Descarta todas las ventanas de portal mostradas actualmente con la razón proporcionada.
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	Indica si hay actualmente ventanas de portal abiertas en la aplicación.
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	Emisor de eventos que emite la lista de instancias HubPortalRef abiertas actualmente cada vez que se abre o se elimina un portal.

Templates

Hazlo tuyo — 1 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`Portal Template`	Referencia de plantilla que se puede pasar al servicio HubPortal para el renderizado dinámico	`<ng-template #portalTemplate> <div class="portal-content"> <div class="portal-header"> <h4>Portal Title</h4> <button data-dismiss="portal">×</button> </div> <div class="portal-body"> Portal content goes here </div> <div class="portal-footer"> <button data-dismiss="portal">Cancel</button> <button data-close="portal">OK</button> </div> </div> </ng-template> <!-- Open the portal --> <button (click)="portal.open(portalTemplate)">Open Portal</button>`