1

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">&times;</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>
Luka Šilje
  • 605
  • 2
  • 8
  • 19
  • It does not answer my question. I have stated my problem and maybe it can have more than 1 solution. His problem is too specific and the 3000 lines answer. My problem is simple and can be probably solved at template level – Luka Šilje Oct 09 '16 at 12:20

1 Answers1

2

I think you can achieve it with the ngTemplateOutlet directive:

<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">&times;</span>
                </button>
                <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
                <template [ngTemplateOutlet]="tmpl"></template>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div *ngIf="!isModal">
  <template [ngTemplateOutlet]="tmpl"></template>
</div>

<template #tmpl>
  <ng-content></ng-content>
</template>

Here's plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399