How to pass data to ng-template from conditional ng-container

Question

My data model:

export class Contact {
  constructor(
    public type: ContactTypes,
    public name: string,
    public link?: string
  ) {
  }
}
export enum ContactTypes {
  Address = 'address-card-o',
  Phone = 'phone',
  Mobile = 'mobile',
  Email = 'envelope-o',
  FaceBook = 'facebook',
  Viber = 'viber',
  Instagram = 'instagram',
  Skype = 'skype',
  Linkedin = 'linkedin',
  VK = 'vk',
  Youtube = 'youtube-play',
  Messanger = 'messanger',
}

Iterating model collection I need to draw icons based on their types. Some icons can be drown in usual way others need special rules for that. So I prepared some templates:

<ng-template #viber>
    <p>viber icon is drawn</p>
</ng-template>

<ng-template #icon let-type="type">
    <p>{{type}} icon is drawn</p>
</ng-template>

The templates are used by looped ng-container:

<div class="cell" *ngFor="let c of $contacts | async">
    <a href="#">
        <ng-container *ngIf="c.type==='viber'; then viber; else icon; context: c">
        </ng-container>
        {{ c.name }}
    </a>
</div>

Issue

In this container declaration I get correctly templates, but I can't catch parameter passed into icon templates.

Is there any ideas how to fix the issue?

P.S.

• angular version: ~11.2.3
• it seems I have the same issue for ngTemplateOutlet without condition, and I really confused why this approach doesn't work (similar example we can find in angular documentation):

<ng-container *ngTemplateOutlet="icon; content: c"></ng-container>

Answer 1

One possible way to use *ngTemplateOutlet instead of *ngIf

   <ng-container *ngTemplateOutlet="c.type==='viber' ? viber : icon; context: { $implicit: c }">

Here expression decides which template to use based on c.type then use context with $implicit

and in templates we can access the whole c object with let-c

<ng-template #viber let-c>
  <p>viber icon is drawn {{c.desc}}</p>
</ng-template>

<ng-template #icon let-c>
  <p>{{c.type}} icon is drawn</p>
</ng-template>

Working Stackblitz