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
– Luka Šilje, Commented Oct 9, 2016 at 12:20

yurzui · Accepted Answer · 2016-10-09 13:39:53Z

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

answered Oct 9, 2016 at 13:39

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luka Šilje Over a year ago

thank you very much! This works nicely, and gracefully!

Collectives™ on Stack Overflow

Angular2.0.0 - Dynamically setting template url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related