5

I'm not able to access template reference variables using ViewChildren when they're placed inside a modal (and hence initially undefined). Even after the modal is inserted into the DOM, the QueryList of elements continues to have zero length.

  1. I've tried injecting ChangeDetectorRef and then manually detecting changes with detectChanges()
  2. I've tried using a setter for ViewChildren

Minimal reproducible example here: https://stackblitz.com/edit/angular-whsdr6

For the example above, I expect the console.log to return an object with a results property an array of length five (five paragraph tag elements).

David Roussov
  • 175
  • 9
  • Dup of https://stackoverflow.com/questions/51959167/angula6-viewchild-in-ng-bootstrap-ng-bootstrap-ngbmodalmodule-modal-returns-und – yurzui May 25 '19 at 03:48
  • 2
    Actually there is a bug in Angular with EmbeddedTemplate inserted in ApplicationRef.views(ng-bootstrap uses this method for modals). For now I would suggest you using component instead of ng-template https://stackblitz.com/edit/angular-ca1pth?file=src%2Fapp%2Fapp.component.html – yurzui May 25 '19 at 03:55
  • yurzui solution is correct – Supradeep Jun 22 '20 at 07:55
  • thanks to @yurzui and for you for this question. It was issue also for me – Sunstrike527 Jan 27 '21 at 04:40
  • 1
    This may be a duplicate, but the answer on the link isn't clear. I'd love to see Yurzui your comment be made an answer and upvoted. Thank you for the help! – Brian Feb 12 '23 at 23:40

0 Answers0