ngx-bootstrap modal cannot read property 'show' of undefined

I'm trying to implement ngx-bootstrap modal in my angular app. But it gives me an error saying Cannot read property 'show' of undefined.

Modal HTML

`

<div *ngIf="isActive" bsModal #createOrEditAuthorModal="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>
  </div>
</div>

`

Modal Ts

`

export class CreateOrEditAuthorModalComponent extends 
AppComponentBase {
  @ViewChild('createOrEditAuthorModal') public modal: 
  ModalDirective

  isActive = false;

  constructor(
    injector: Injector
  ) {
    super(injector);
    this.author = new UpdateAuthorInput();
  }

  show(): void {
    this.modal.show();
    this.isActive = true;
  }

  close(): void {
    this.modal.hide();
    this.isActive = false;
  }

}

`

Parent Component HTML

`

<app-create-or-edit-author-modal #createOrEditAuthor></app-create- 
or-edit-author-modal>

`

Parent Component Ts

`

export class AuthorsComponent extends AppComponentBase implements 
AfterContentInit {
  @ViewChild('createOrEditAuthor') createOrEditAuthor: 
CreateOrEditAuthorModalComponent

  constructor(
    injector: Injector
  ) {
    super(injector);
  }

  ngAfterContentInit(): void {

  }

  createNewAuthor(): void {
    this.createOrEditAuthor.show();
  }

}

`

Don't know where is the problem though everything seems okay. It worked yesterday but giving error today. please any body help....