How to use ngSwitch with template?

Question

I have template with IF statement:

<li *ngIf="activity.entity_name == 'Project'" [activity-project-item]="activity"></li>
<li *ngIf="activity.entity_name == 'Tooling'" [activity-tooling-item]="activity"></li>
<li *ngIf="activity.entity_name != 'Project' && activity.entity_name != 'Tooling'" [activity-item]="activity"></li>

How to write this template with ngSwitch directive?

For example this template has parse error "Components on an embedded template":

<li [ngSwitch]="activity.entity_name">
    <template [ngSwitchCase]="'Project'" [activity-project-item]="activity"></template>
</li>

And this template has parse error "No provider for NgSwitch":

<template [ngSwitch]="activity.entity_name">
    <li [ngSwitchCase]="'Project'" [activity-project-item]="activity"></li>
</template>

Answer 1

One possibility:

<li [ngSwitch]="activity.entity_name">
  <template [ngSwitchCase]="'Project'">Selected Project</template>
  <template [ngSwitchCase]="'Tooling'">Selected Tooling</template>
  <template ngSwitchDefault>Or else...</template>
</li>

Alternate syntax:

<div [ngSwitch]="activity.entity_name">
  <li *ngSwitchCase="'Project'">Selected Project</li>
  <li *ngSwitchCase="'Tooling'">Selected Tooling</li>
  <li *ngSwitchDefault>Or else...</li>
</div>

Take a look at the official docs and live demo.