Angular2.0.0 - Dynamically setting template url

Question

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>

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

score 2 · Accepted Answer · answered Oct 09 '16 at 13:39

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

thank you very much! This works nicely, and gracefully! – Luka Šilje Oct 09 '16 at 14:07 — Luka Šilje, Oct 09 '16 at 14:07

Angular2.0.0 - Dynamically setting template url

1 Answers1