Muy bien, antes que nada, ya he buscado este problema como loco y he encontrado soluciones (algunas explicadas aquí) pero ninguna de ellas explica una manera eficiente de hacerlo. Así que aquí voy...
De lo que se trata
Estoy creando un modal, el cual usa ng-bootstrap. Hice un componente de un formulario para reutilizarlo en otras páginas. Puse este componente dentro del modal. Y necesito tener acceso a las variables y métodos de este componente dentro del modal desde el componente Padre. Así que puse un atributo @ViewChild dentro del componente Padre y lo asigné al Componente Hijo.
Cuando abro el modal, el componente se muestra sin problemas. El problema viene cuando el usuario da clic en el botón de Create. Cuando el usuario da click a este botón, el padre (el cual contiene el modal) pretende ejecutar el método del Hijo para que este envíe el formulario. Pero, el Padre no puede acceder a este método porque el Hijo sale como undefined
aunque el modal ya se encuentra abierto.
Lo que ya he intentado
Ya intenté poner el Componente Hijo afuera del ng-template y funciona bien, pero lo necesito dentro del modal.
También intenté pasar el Componente como argumento del método Padre para que dentro de esta función ejecute el método del hijo con ayuda de ese parámetro (que viene siendo el componente hijo). Funciona, pero hace el código más sucio y trae consigo más problemas en el futuro. (De hecho, este es mi YO del futuro el cual tuvo más problemas con esta implementación)
Si alguien se pregunta qué tipo de problemas son estos, bueno, pues yo reutilizo componentes dentro del componente del formulario (el Componente Hijo) entonces, ya que este 'Componente Nieto' sigue estando dentro del modal, el problema se repite pero un nivel más profundo. Y ahora tengo que hacer lo mismo que hice en el Padre, pero ahora en el Hijo, y así...
Código (App de Stackblitz)
Aquí está una app de Stackblitz que hice. Lo intenté hacer lo más simple que pude, quitando todo el código que no era importante e aislando el problema.
El mensaje de error que me muestra
Este es el error que se muestra en la consola.
ERROR TypeError: Cannot read property 'sendClassForm' of undefined
He leído que cuando el ng-template no se ha renderizado en el DOM (como cuando el modal aún no se abre) e intentas acceder al Componente Hijo, obtienes este error porque aún no existe, pero no entiendo por qué sigue pasando si se supone que ya está abierto el modal.
Angular Version: 8.1.2
"@ng-bootstrap/ng-bootstrap": "^5.1.0"