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 rescue

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Tags:

Angular