Добавить ng-шаблон динамически

Я хочу динамически добавлять содержимое ниже в HTML.

<ng-template #elseblock *ngIf="var">
    <h1>
        {{heading}}
    </h1>
</ng-template>

Я использую для этого подход ниже.

В файле app.component.ts:

htmldata: any = `<ng-template #elseComponent *ngIf="var">
<h1>
  {{ heading }}
</h1>

`;

и в app.component.html

 <div [innerHTML]="htmldata"> </div>

но этот подход отображает только тег h1 в DOM (без шаблона ng)

Пожалуйста, помогите мне динамически добавить ng-template, чтобы блок #else, *ngIf также работал.


angular angular2-template ng-template angular5
person VISHAL TANK    schedule 05.04.2018    source источник
comment
ngTemplateOutlet — хороший подход   -  person Praveen Soni    schedule 05.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я понимаю из вашего вопроса, вы хотите проецировать контент.

вы должны использовать выход шаблона для этого типа использования.

<ng-template #heading let-heading>
  <h1>
    {{heading}}
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="heading; context: ContextObj">
</ng-container>

официальный документ Angular ngTemplateOutlet
или отличный пост в блоге на ngTemplateOutlet

person Praveen Soni    schedule 05.04.2018