feat(angular): support separate Button/Modal components#2
Merged
Conversation
The trigger and the <dialog> don't need to share a component: they're linked only by the dialog id via the root PrettyModalService and the core's document.getElementById lookup. Refactor the Angular demo into standalone app-modal-trigger-button and app-modal components used by a parent, document the pattern in the wrapper README, and add a wrapper integration test that mounts the trigger and dialog in different components and asserts they link through the shared service. Avoid naming the modal wrapper input `id`: Angular reflects it onto the host element too, duplicating the id and breaking getElementById (which returned the host instead of the <dialog>, causing "showModal is not a function"). Use `modalId` instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Qué
Confirma y documenta que el wrapper de Angular funciona cuando el botón (trigger) y el
<dialog>(modal) viven en componentes standalone separados usados por un padre — no solo en un único componente como hacía la demo.No hizo falta tocar el código de la librería: el desacople es por diseño.
Por qué funciona
PrettyModalServiceesprovidedIn: 'root'→ singleton compartido por toda la app.document.getElementById— búsqueda global en el DOM, no atada al árbol de componentes.(opened)/(closed)está indexado por ese id en el singleton.Cambios
app-modal-trigger-buttonyapp-modal, enlazados solo por el id, usados desdeAppComponent.wrapper.spec.ts: monta trigger y dialog en componentes distintos y verifica que se enlazan vía el servicio raíz.Bugfix incluido
Renombrado el input del modal de
id→modalId. Un@Input() idse refleja también como atributo en el host<app-modal>, duplicando el id;document.getElementByIddevolvía el host (sinshowModal()) en vez del<dialog>, causandoTypeError: e.showModal is not a function.Verificación
ng buildde la demo: OKvitest rundel wrapper: 13/13 en verde (incluye el nuevo test cross-component)🤖 Generated with Claude Code