Apologies in advance, this is not an issue but a support request...
I love this lib, it´s great for most use cases. I´m just missing the option for a more "specific" use case when you don´t want to create a component (extending SimpleModalComponent) but rather just include it in your parent component. This is the way other libs (for ex Angular Bootstrap 3 Modal Component work. I´d really like to have the best of both worlds, have components for alerts, confirms, etc as you do but also to pull the modal from DOM in a more Bootstrapish approach.
My approach to do this is to create a "DomComponent" with "" selector that in turn calls SimpleModalService to open it´s content (through a GenericModalComponent). I´ll post the code i´m using, but it might be a totally wrong approach, so I can point out the problems i´m encountering....
In parent component ....
<button type="button" class="btn btn-default" (click)="domModal.open()">Open
<b><modal></b> in dom.</button>
<pre>inputText: {{inputText}}</pre>
<modal (onClose)="event_here?()" title="Modal title" #domModal>
<modal-header>Hi this is head of modal.
<b>Bold</b>
</modal-header>
Modal body here.... this is the first modal.
<input type="text" evInput evIcon="fa-android" [(ngModel)]="inputText" />
<modal-footer>Hi this is modal footer.
<button class="btn btn-success" (click)="modalInnerSubmit(domModal)">InnerSubmit</button>
</modal-footer>
</modal>
And DomModal component:
(BaseModalComponent extends SimpleModalComponent).
@Component({
selector: 'modal',
template: `<ng-template #domModalContent>
<ng-content ></ng-content>
</ng-template>
<ng-template #footer >
<ng-content select="modal-footer"></ng-content>
</ng-template>
<ng-template #header >
<ng-content select="modal-header"></ng-content>
</ng-template>`
})
export class DomModalComponent extends BaseModalComponent implements GenericModalModel, OnInit, OnDestroy {
@ViewChild('domModalContent') content: TemplateRef<any>;
@ViewChild('footer') footer: TemplateRef<any>;
@ViewChild('header') header: TemplateRef<any>;
openM: Observable<any>;
modalIndex: number;
openModal: SimpleModalService;
constructor(private modalService: SimpleModalService,
private _componentFactoryResolver: ComponentFactoryResolver) {
super();
}
private closerCallback(modal){
// does not work... modal is opener (this) not the one service opened.
// this.modalService.removeModal(modal);
const openModals = this.modalService.modalHolderComponent.modals;
const index = _.indexOf(openModals, this.openModal);
const activeComponent = this.modalService.modalHolderComponent.modals[index];
if (activeComponent) {
activeComponent.close();
}
}
open() {
// how many of this.properties are attributes to pass along to creation?
const attrObject = this.attributesToObject() || {};
this.openM = this.modalService.addModal(GenericModalComponent,
{...attrObject},
{closeOnClickOutside: true}
);
// this never fires...
this.openM.subscribe((isConfirmed) => {
if (isConfirmed) {
this.close();
}
});
// Might fail because modalHolderComponent is private in service
const openModals = this.modalService.modalHolderComponent.modals;
this.openModal = _.last(openModals);
this.modalIndex = openModals.length ? openModals.length - 1 : null;
}
attributesToObject() {
const availableAttrs = Object.keys(this);
// attributes we want to parse...
const attrObject = new GenericModalModelClass();
for (const attr of Object.keys(attrObject) {
if (this[attr]) {
attrObject[attr] = this[attr];
}
}
return attrObject;
}
}
I have major issues here.
I can open the modal just fine using Service. But i have no reference to the opened Modal, the only way i can seem to access it is by " this.modalService.modalHolderComponent.modals;" which seems wrong and even more since it´s a private var.
I implemented "closerCallback" to be able to extend, since DomModal is not opened through service... here is where i close the opened modal... But "this.modalService.removeModal();" needs the opened modal which i can´t seem to target, so I hackishly target modalHolderComponent to get the last opened modal.
There must be a better way (for sure ;) and even if my approach is halfway alright (doubt it) there must be a way of interacting (closing, etc) with the opened modal through Promises, Observables... Triggering the opened modal close() and resolving without direct ref to modalHolderComponent....
I´d really love to implement this to cover all cases. Thanks in advance!!.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent