Modal service not reflecting bindings?

[eestein]

Hi, thank you for releasing the modal service!
I have a problem, though. I have the following code:

let modal = this.modalService.show(modalComponent);

if (model) {
    let component = <BaseModalComponent>modal.content;
    component.model = model;
}

The items are correctly being passed on to the component, but it's not reflecting on my modal:

{{model.title}} is blank.

I'm >>assuming<< maybe it's because the modal is first shown and then it won't update anymore? Is it something wrong with my code? If I debug it the model is there the problem is it won't reflect on the view (HTML).

The model is not reflecting on the modal's view. The object is updated, but not reflected on the view. Here are the important bits:

showFromComponent(modalComponent: any, model?: any): void {
    let modal = this.modalService.show(modalComponent);

    if (model) {
        let component = <BaseModalComponent>modal.content;

        component.model = model;
        component.afterModelLoad();
    }
}

BaseModalComponent:

import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

export abstract class BaseModalComponent {
    model: any = {};

    protected constructor(
        public bsModalRef: BsModalRef
    ) { }

    public abstract afterModelLoad(): void;
}

ModalComponent:

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
import { BaseModalComponent } from '../../../app.core/abstractions/base-modal.component';

@Component({
    selector: 'visit-detail-modal',
    templateUrl: './visit-detail-modal.component.html',
    styleUrls: ['./visit-detail-modal.component.css']
})
export class VisitDetailModalComponent extends BaseModalComponent implements OnInit {
    description: string = '';

    constructor(
        public bsModalRef: BsModalRef
    ) {
        super(bsModalRef);
    }

    ngOnInit(): void {
    }

    afterModelLoad(): void {
        this.description = this.model.title;
    }
}

And finally the view:

<div class="modal-body">
    {{description}}
</div>

Description is always blank. If I add a debugger inside afterModelLoad the description is set, but it doesn't update the view.

Any ideas?

Thanks.

[eestein]

I asked it also on StackOverflow with more code:

https://stackoverflow.com/questions/45309095/modal-not-reflecting-bindings

Updated question here with the extra code bits.

[jvanrossum]

In your component inject private cd: ChangeDetectorRef and run detectChanges at the end of you afterModelLoad method

afterModelLoad(): void {
    this.description = this.model.title;
    this.cd.detectChanges();
}

But it would be nicer that the show method BsModalService provided a way to pass data to initialize the component with.
Same issue/feature-request is here: #2251.
A discussion at ng-bootstrap about this has already taken place here:
ng-bootstrap/ng-bootstrap#861

[eestein]

Thanks @jvanrossum I'll try that, but yeah, that'd be nice!

[samhoward86]

I don't think the detectChanges solution works with inputs using [(ngModel)]. I have a modal containing a form and it's a complete no-go for me at this point.

…

On Thu, Jul 27, 2017, 05:41 Eros Stein ***@***.***> wrote: Thanks @jvanrossum <https://github.com/jvanrossum> I'll try that, but yeah, that'd be nice! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2275 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AArFU9LPhC_vqTC9VEpEjtN9rilfVJIpks5sSHeGgaJpZM4OipPn> .

[eestein]

@samhoward86 I agree, it works for me, but being forced to run detectChanges every time I need something updated is far from being the best case scenario. Anyway, I'm pretty sure it'll be fixed soon :) #2293

Btw, @IlyaSurmay do you have an ETA on the 1.8.1 release? Thanks for the quick fix!

[IlyaSurmay]

@eestein probably tomorrow, but can't say for sure. we're not planning to include a lot of stuff in the next version so I think it will be released soon

[eestein]

@IlyaSurmay thank you!

[AakritiGoyal]

@eestein i am also getting same issue ... but the detectChanges() is not working for me ... any ideas about other fixes ...?

[eestein]

@aakritiOpallios unfortunately no, are you using the latest version? It seems this was fixed by #2293

[AakritiGoyal]

@eestein i am using 2.0.0-beta.8 version of bootstrap modal