Angular 2 - ngfor without wrapping in a container
Not sure to understand what you want / try to do but you can do something like this:
<ul class="list-group">
<li *ngFor="#course of courses | async">
{{ course.tile_content }}
</li>
</ul>
Note that the expanded syntax could also be used:
<template ngFor [ngForOf]="courses | async" #course>
{{ course.tile_content }}
</template>
(the template tag won't be added into the HTML)
Edit
This works:
<ul *ngFor="#elt of elements | async" [innerHTML]="elt.title">
</ul>
See this plunkr: https://plnkr.co/edit/VJWV9Kfh15O4KO8NLNP3?p=preview
You can use outerHTML
<ul class="list-group" >
<li *ngFor="let course of courses | async" [outerHtml]="course.tile_content"></li>
</ul>
Plunker example
In some cases, <ng-container>
may be useful. Like (not for this specific question):
<ng-container *ngFor="let item of items; let i = index">
...
</ng-container>
In the DOM, its content is rendered as usual, but the tag itself is rendered as an HTML comment.
From the documentation:
Group sibling elements with
<ng-container>
[...]
<ng-container>
to the rescueThe Angular
<ng-container>
is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.