import { Component } from "@angular/core" ; import { InjectTemplateChild } from "./InjectTemplateChild" ; interface Friend { id : number ; name : string ; avatar : string ; } @ Component ( { selector : "InjectTemplateParent" , template : `
		<p>
			<strong>Best Friend</strong>: {{ bestFriend?.name || "None selected" }}
			&mdash; <a (click)="clearSelection()">Clear selection</a>
		</p>

		<InjectTemplateChild [items]="friends" [(value)]="bestFriend" placeholder="Select Angry bird">
			<template let-friend="item">
				<img [src]="( './assets/' + friend.avatar )" />
				<span class="name">
					{{ friend.name }}
				</span>
			</template>
		</InjectTemplateChild>
	` } ) export class InjectTemplateParent { public bestFriend : Friend ; public friends : Friend [ ] ; constructor ( ) { this . bestFriend = null ; this . friends = [ { id : 1 , name : "Angry" , avatar : "angry.png" } , { id : 2 , name : "Fast tracker" , avatar : "fasttracker.png" } , { id : 3 , name : "Pivoter" , avatar : "pivoter.png" } , { id : 4 , name : "Time bomb" , avatar : "timebomb.png" } ] ; } public clearSelection ( ) { this . bestFriend = null ; } }