tengo un componente asi
import {Component, OnInit} from '@angular/core'; import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'details', templateUrl: 'details.component.html', styleUrls: ["./details.component.scss"], }) export class DetailsComponent { constructor( private modalService: NgbModal ) { } open(content) { this.modalService.open(content).result.then((result) => { console.log("closed"); }, (reason) => { console.log("dismissed"); }); } }el html es, observe el componente emergente en la parte superior
<popover></popover> <div class="row"> <div class="col"> <table class="table"> <thead> <th>Action</th> </thead> <tbody> <tr> <td> <button (click)="open(popover)"> open </button> </td> </tr> </tbody> </table> </div> </div>El componente abierto es solo un componente para mostrar html
import {Component, OnInit} from '@angular/core'; @Component({ selector: 'popover', templateUrl: 'popover.component.html', styleUrls: ["./popover.component.scss"], }) export class PopOverComponent { constructor( ) { } }y el html para el componente popover
<ng-template #popover let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> </div> </ng-template>Mi problema es cuando tengo ng-template envuelto alrededor de la prueba, el elemento de prueba h1 no se muestra en el dom. Más explícitamente, ng-template no representa lo que necesito para pasar el #popover a la función open para abrir el popover.
Cuando elimino la plantilla ng, puedo ver la prueba h1. Necesito la plantilla ng para renderizar en el dom y estoy poniendo i en un componente porque hay mucho html en el componente popover.
¿Alguna idea de por qué esto se está comportando de esta manera?
use <ng-container> en su lugar
https://angular.io/guide/structural-directives#!#ng-container