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>

Then in my source code, I had

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 >


<ng-template #modal>


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

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

  modalClass:string = 'modal-lg';

  private reference: BsModalRef;

  constructor(private modalService: BsModalService) { }

  ngOnInit() {

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

  hide() {
    if(this.reference) {