We are building an angular 4 component library and one of the components is a Busy component. The purpose of the component is to allow a developer to create an overlay on any given HTML element which contains a spinner graphic.
<div *xuiBusy="isBusy">...</div>
When the value of isBusy is true we want to append to the inner content of the div so that we can present the overlay elements on top of the content.
We have been able to append the component to the ViewContainerRef however this inserts the busy element as a sibling to the div rather than within the div as desired.
ngOnInit(): void {
const compFactory = this._componentFactory.resolveComponentFactory(XuiBusyComponent);
const comp = this._viewContainer.createComponent(compFactory);
What the consumer does:
<div *xuiBusy="isBusy">
<span>This is the content</span>
</div>
When isBusy is set to true we want to alter the markup to look something like this. Notice that <spinner> has been added to the div element.
<div *xuiBusy="isBusy">
<span>This is the content</span>
<spinner>Please wait...</spinner> <-- inserted by directive
</div>
Any advice is appreciated!