I wanted to create a ContainerComponent
that surrounds ng-content
depending on the isModal:boolean
.
My approach is not working because it only recognizes the last <ng-content>
tag, so I wanted to separate the TemplateUrl for modal and non-modal. Is it possible? If not, what would be the cleanest way of doing this?
This is my non working code:
<div *ngIf="isModal" class="modal in">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click) = "close()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div *ngIf="!isModal">
<ng-content></ng-content>
</div>