I was struggling with an issue where I had a view child that was undefined even though it was there. In my components HTML code I had:

<ng-template #modal>
  <app-some-child></app-some-child>
</ng-template>

Then in my source code, I had

@ViewChild(SomeChild)
public childComponent: SomeChild;

But even if it was present it just would not get populated it was always undefined.
I then found out it was some issue where the view child could not reference the component with in the template because it gets established else ware.

I then decide to create a new component called root modal, it handles the issue with the template by taking its content and putting it into the template.

So now it looks like this:

<app-root-modal-control >
  <app-some-child></app-some-child>
</app-root-modal-control>

root-modal-control.component.html

<ng-template #modal>
  <ng-content></ng-content>
</ng-template>

root-modal-control.component.ts

import {Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {BsModalRef, BsModalService} from "ngx-bootstrap";

@Component({
  selector: 'app-root-modal-control',
  templateUrl: './root-modal-control.component.html',
  styleUrls: ['./root-modal-control.component.scss']
})
export class RootModalControlComponent implements OnInit {

  @Input('class')
  modalClass:string = 'modal-lg';

  @ViewChild('modal')
  modalTemplate:TemplateRef<any>;
  private reference: BsModalRef;

  constructor(private modalService: BsModalService) { }

  ngOnInit() {
  }

  show() {
    this.reference = this.modalService.show(this.modalTemplate,{class: this.modalClass});
  }

  hide() {
    if(this.reference) {
      this.reference.hide();
    }
  }

}