CODEWITHSUNDEEP
angularngx-bootstrap
eestein
eestein

Reputation: 5114

Modal not reflecting bindings?

I open a modal inside my Angular4 app using ngx-bootstrap: http://valor-software.com/ngx-bootstrap/#/modals#service-component

The problem is 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?

Upvotes: 1

Views: 1502

Answers (1)

Jan van Rossum
Jan van Rossum

Reputation: 36

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. Somewhat the same issue/feature-request has been reported here: https://github.com/valor-software/ngx-bootstrap/issues/2251. A discussion about something similar has taken place at ng-bootstrap as well: https://github.com/ng-bootstrap/ng-bootstrap/issues/861

Upvotes: 1

Related Questions