Modal is not opening in Angular2

Question

I am trying to open bootstrap dialog box in Angular2 application. When I open it on click of button, it's working fine, But when I try to open it from component, It's not working and showing error "Property Open doest not exist on type ModalComponent",

Below is my code, Which is working,

<button type="button" (click)="modal.open()" class="btn btn-default">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        <input type="text" placeholder="Id" />
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

I want to open it from component, Below is my code, Not working.

import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Search } from '../model/Search';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'searchGrid',
    template: require('./searchGrid.component.html')
})
export class SearchGridComponent {
    @Input() Data: Search[] = [];
    search: Search;
    //modal: ModalComponent;

    @ViewChild('modal')
    modal: ModalComponent;

    public EditEntry(data) {
        console.log(data);
        this.modal.open();
    }

My HTML,

    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Order Code</th>
                <th>Id</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dt of Data">
                <td>
                    <span>
                        <input type="button" value="Edit" (click)="EditEntry(dt)" />
                    </span>
                </td>
                <td>{{dt.orderCode}}</td>
                <td>{{dt.id}}</td>
            </tr>
        </tbody>
    </table>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        <input type="text" placeholder="Id" />
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>