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>
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?
~11.2.3
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>
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