Empty modal

[nanthil]

• I'm submitting a ... [x ] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug?

Bug

• What is the current behavior?

Modal has no content/modal template doesn't render

No console errors

• **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal

This component is wired into a number of other components and is being reused all over the site. Make a minimal recreation on plunkr isn't possible. This is the component at its most basic. The modal opens, but there is no content. Nothing inside. If I open dev tools and "edit as html" there is conent in the modal.

The defaultOverlay is set in my app component template.

Basic functionality, I need the component, if active, allow a click event. Hence the renderer.listen()

However, the template in the modal alert doesn't render, and gives me an empty template.

YES I HAVE BOOTSTRAP STYLE IN MY INDEX.HTML

export class EquipmentComponent{
    @Input() isActive: boolean;
    @Input() equipment: any;
    @Input() width: number;
    height: number;
    name: string;
    equipmentImg : any;
    transferData: Object;
    constructor(
        private el: ElementRef, 
        private rend: Renderer,
        private vcRef: ViewContainerRef,
        overlay: Overlay, 
        public modal: Modal){

    }
    ngOnInit() {
        this.name = this.equipment.name;
        this.equipmentImg = this.equipment.imgUrl;
        this.height = this.equipment.height * 12;
        console.log(this.isActive);

        //data transfers on drop
        this.transferData = {
            e: this.equipment, 
            w: this.width
        }
        if(this.isActive){
            this.rend.listen(this.el.nativeElement, 'click', () => {
                this.openConfig();
            })
        }
    }
    openConfig(){
          this.modal.alert().size('lg').showClose(true).title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
        .open();
    }

}

• What is the expected behavior?

I just want the basic demo template to render, but i'm getting an empty modal.

• Please tell us about your environment:

Angular 2.0.0 official

Electron

[shlomiassaf]

I can't really figure out what happens without examples.

Do you get any console error? The body is TEXT only, not HTML, do you get the text inside?

[shlomiassaf]

I'll close this stale issue, please re-open with a comment if it still an issue.

[ronenmiller]

Same issue for me as well. I simply copied your example from here: https://github.com/shlomiassaf/angular2-modal/blob/master/src/demo/app/bootstrap-demo/bootstrap-demo-page/custom-modal-sample.ts

And the usage from here: https://github.com/shlomiassaf/angular2-modal/blob/88bcadaedd22277cf7b6dd55dcb3e48ed10589fb/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts

So there are no errors in compilation and the Modal seams to load but it is empty, i.e. template isn't rendering.

[alexandredavi]

@ronenmiller Did you solved it? Same issue for me

[ronenmiller]

Yes, you only need to configure the modal in the main app component. Then in every other module just use it when getting the public instance via the constructor.

[AsmaGargouri]

@ronenmiller , can you give some more details please ? I have tyhe same problem, Sometimes I got this empty modal and I couldn't figure out why it is not rendering. Thank you

[nadunliyanage]

Instantiate Overlay from 'angular2-modal' in the constructor of the component and set the defaultViewContainer of it as a ViewContainerRef object `import { Overlay } from 'angular2-modal'; import { ViewContainerRef } from '@angular/core';

---

constructor(overlay:Overlay,vcRef: ViewContainerRef){ overlay.defaultViewContainer=vcRef; }`