Expected behavior Modal renders Actual behavior I get the following error

TypeError: Cannot read property 'backdrop' of undefined
AppComponent_Host.ngfactory.js:4
ERROR CONTEXT
AppComponent_Host.ngfactory.js:4
DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, elDef: Object, elView: Object}

Resources (screenshots, code snippets etc.) I am trying to simply call the modal in the app.component. The code is as follows

<app-navbar *ngIf="authState"></app-navbar>
<router-outlet></router-outlet>
<!-- SIGNUP MODAL -->
<div
mdbModal
#signUpModal="mdbModal"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="signUpModal"
aria-hidden="true"
data-backdrop="static"
>
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content" id="sign-up-modal">
    <div class="modal-body">
      <app-signup [signUpModal]="signUpModal"></app-signup>
    </div>
  </div>
</div>

The TS code is as follows

 @ViewChild("signUpModal", { static: true }) signUpModal: ModalDirective;

 ngOnInit() {
    var n = this.currentPath.lastIndexOf('/');
    var result = this.currentPath.substring(n + 1);
     if( result === "direct") {
      //the path is a direct link inside the app
      self.authState = "no";
      self.userService.setHomeStyle("yes");
      self.homeStyle = "yes";
      this.showSignUp();
    }
  }

//show signup modal if user is not logged in
  showSignUp() {
    this.signUpModal.show();
  }

A similar issue was reported here however the solution seems to have been shared on email and hence cannot be accessed by me.