Ngx-bootstrap: Cannot read property 'backdrop' of undefined

[abbymrs]

i use angular 4.0.0 with ngx-bootstrap 1.7.1, i tried to use ModalDirective.show method, but it always creates error: Cannot read property 'backdrop' of undefined,

ERROR TypeError: Cannot read property 'backdrop' of undefined
    at ModalDirective.webpackJsonp.../../../../ngx-bootstrap/modal/modal.component.js.ModalDirective.showBackdrop (modal.component.js:200)
    at ModalDirective.webpackJsonp.../../../../ngx-bootstrap/modal/modal.component.js.ModalDirective.show (modal.component.js:108)
    at MyModalComponent.webpackJsonp.../../../../../src/app/common/modal/modal.component.ts.MyModalComponent.show (modal.component.ts:25)
    at Object.eval [as handleEvent] (HomeComponent.html:18)
    at handleEvent (core.es5.js:12047)
    at callWithDebugContext (core.es5.js:13506)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13094)
    at dispatchEvent (core.es5.js:8659)
    at core.es5.js:9270
    at HTMLSpanElement.<anonymous> (platform-browser.es5.js:2668)

below is my codes for reference:

modal.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';

@Component({
    selector: 'modal',
    templateUrl: 'modal.component.html',
    styleUrls: ['modal.component.less'],
    providers: [
        ModalDirective
    ]
})

export class MyModalComponent implements Input, Output {
    @Input() data: any;
    @Input() className: string;
    @Input() text: string;
    @Output() onConfirm = new EventEmitter();
    constructor(private modalService:ModalDirective){}
    show(){
        this.modalService.show();
    }
    hide(){
        this.modalService.hide();
    }
    confirm() {
        this.onConfirm.emit();
        console.log(1)
    }
}

modal.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap';
import { MyModalComponent } from './modal.component';

@NgModule({
    declarations: [
        MyModalComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        ModalModule
    ],
    exports: [
        MyModalComponent
    ]
})

export class MyModalModule { }

modal.component.html

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">Large modal</h4>
                <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                <form novalidate #editForm>
                    <div class="form-group">
                        <label>ID:</label>
                        <input type="text" class="form-control" [(ngModel)]="data.id" name="id">
                    </div>
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control" [(ngModel)]="data.name" name="username">
                    </div>
                    <div class="form-group">
                        <label>Sex:</label>
                        <input type="text" class="form-control" [(ngModel)]="data.sex" name="sex">
                    </div>
                    <div class="form-group">
                        <label>Job:</label>
                        <input type="text" class="form-control" [(ngModel)]="data.job" name="job">
                    </div>
                    <div class="form-group btn-groups">
                        <button class="btn btn-primary" type="submit" (click)="confirm(data)">Confirm</button>
                        <button class="btn btn-danger" (click)="lgModal.hide()">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

home.component.ts

import { Component, Input, ViewChild, AfterViewInit } from '@angular/core';
import { ApiService } from '../common/api.service';
import { MyModalComponent } from '../common/modal/modal.component';

@Component({
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.less'],
})

export class HomeComponent {
    user = {};
    @Input() users: any[];
    @ViewChild(MyModalComponent)
    private popModal: MyModalComponent;
    constructor(private apiService: ApiService) { }
    del(user) {
        this.apiService.delUser(user.id + 1)
            .subscribe(res => {
                console.log(res);
            })
    }
    confirm(user) {
        this.apiService.editUser(user.id)
            .subscribe(res => {
                console.log(res);
            })
    }
}

home.component.html:

<table class="table table-bordered table-striped" *ngIf="users.length > 0">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Sex</th>
            <th>Job</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.job}}</td>
            <td class="actions-group">
                <span class="edit text-info" (click)="popover.show()">Edit</span>
                <span class="del text-danger" (click)="del(user)">Delete</span>
            </td>
            <modal #popover [data]="user" (onConfirm)="confirm(user)"></modal>
        </tr>
    </tbody>
</table>

[valorkin]

issue in modal.component.ts
the way you are injecting modalService:ModalDirective modal directive
compare it to demo component here http://valor-software.com/ngx-bootstrap/#/modals#child

[abbymrs]

it works, thanks!