CODEWITHSUNDEEP
ng-bootstrap
Chris Gunawardena
Chris Gunawardena

Reputation: 6468

Get a reference to a element nested inside a modal

I'm trying to get a reference to an element nested inside a modal. While using @ViewChild works for the modal, its not working for any nested elements. eg: the datePicker in the code below. Working demo here: https://stackblitz.com/edit/angular-s8dtmm-8gqgus (The 2nd console for datePicker is undefined)

export class AppComponent {
  @ViewChild('content') modal: ElementRef;
  @ViewChild('dp') datePicker: ElementRef;

  constructor(private modalService: NgbModal) {}

  open() {
    this.modalService.open(this.modal);
    console.log('modal', !!this.modal); // ref to #content
    console.log('dp', this.datePicker); // undefined
  }
}

Template:

<ng-template #content let-modal>
  <input ngbDatepicker #dp="ngbDatepicker">
  <button class="calendar" (click)="dp.toggle()">Date picker</button>
</ng-template>
<button(click)="open()">Open  modal</button>

Upvotes: 2

Views: 3996

Answers (1)

Ian A
Ian A

Reputation: 6163

If you can modify your example so that the modal content is a separate component (i.e. based on this example rather than this one) then you should be able to access the datePicker component in the open() method. I have created a launch-modal.component which defines the "Open" button and logs out the value of dp when the modal is opened:

launch-modal.component.html

<button class="btn btn-outline-primary" (click)="open()">Open  modal</button>

launch-modal.component.ts

import { Component, ElementRef } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';

@Component({
  selector: 'launch-modal-component',
  templateUrl: './launch-modal.component.html'
})
export class LaunchModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(ModalComponent);
    console.log('dp', modalRef.componentInstance.datePicker);
  }
}

I've then defined a modal.component.ts that defines the modal content (this is based on the app.module.html in your question, and defines a ViewChild for the datePicker):

modal.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'modal-component',
  template: `
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
  <input ngbDatepicker #dp="ngbDatepicker">
  <button class="btn btn-outline-primary calendar" (click)="dp.toggle()" type="button">Date picker</button>
  `
})
export class ModalComponent {

  @ViewChild('dp') datePicker: ElementRef;

  constructor(public activeModal: NgbActiveModal) {}
}

The output of the console when the modal is opened is:

enter image description here

Please see this Stackblitz for a working demo.

Upvotes: 2

Related Questions