CODEWITHSUNDEEP
angular
Ramesh Yadav
Ramesh Yadav

Reputation: 31

ElementRef of ng-bootstrap modal

I want to Reference html element which is inside ng-bootstrap modal from component of angular 2 

<ng-template #liveView id="liveView" let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Live View</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <canvas #liveViewCanvas style="border: 1px solid black;" width="270" height="480"></canvas>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger btn-xs" (click)="closeLiveViewModal()">
      <span class="fa fa-trash"></span> Close
    </button>
  </div>
</ng-template>

How to Reference #liveViewCanvas within angular 2 component? I am getting "ERROR TypeError: Cannot read property 'nativeElement' of undefined" when referencing through @viewchild

Upvotes: 3

Views: 2998

Answers (3)

Alexander
Alexander

Reputation: 1263

Just use DevTools to get the element you want. But it might stop working if the layout of modal would change in the next release:

this.notificationModalRef = this.modalService.open(notificationComponentRef.instance.notificationContent, { centered: true, size: 'xl', scrollable: true });
this.dragDrop.createDrag((this.notificationModalRef as any)._windowCmptRef.instance._dialogEl); // you get the idea

Upvotes: 0

Vladimir Saakyan
Vladimir Saakyan

Reputation: 11

Maybe something this.

const modalRef = this.modalService.open(HoldingModalsProductCreateComponent,{backdrop: 'static'});
modalRef._windowCmptRef.hostView.rootNodes[0];

Upvotes: 1

Serginho
Serginho

Reputation: 7490

Like NgIf directive, you can only use a reference when is in the DOM. If you want to manipulate the template, just create a component with the template and logic of the modal, and launch it.

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

Upvotes: 0

Related Questions