import { Component , ContentChild , EventEmitter , TemplateRef } from "@angular/core" ; @ Component ( { selector : "InjectTemplateChild" , inputs : [ "items" , "value" , "placeholder" ] , outputs : [ "valueChange" ] , styles : [ `
        * { 
           cursor: pointer
        }
    ` ] , queries : { itemTemplate : new ContentChild ( TemplateRef ) } , host : { "[class.is-open]" : "isShowingItems" } , template : `
		<div (click)="toggleItems()" class="dropdown-root" [ngSwitch]="!!value">
			<div *ngSwitchCase="true" class="dropdown-item-content">
				<template
					[ngTemplateOutlet]="itemTemplate"
					[ngOutletContext]="{ item: value, index: -1 }">
				</template>

			</div>
			<div *ngSwitchCase="false" class="placeholder">
                <button>
			    	{{ placeholder || "Nothing Selected" }}
               </button>
			</div>
		</div>

		<ul *ngIf="isShowingItems" class="dropdown-items">
			<li	*ngFor="let item of items ; let index = index" (click)="selectItem( item )" class="dropdown-item">
				<div class="dropdown-item-content">
					<template
						[ngTemplateOutlet]="itemTemplate"
						[ngOutletContext]="{ item: item, index: index }">
					</template>
				</div>
			</li>
		</ul>
	` } ) export class InjectTemplateChild { constructor ( ) { this . isShowingItems = false ; this . valueChange = new EventEmitter ( ) ; } public isShowingItems : boolean ; public items : any [ ] ; public placeholder : string ; public value : any ; public valueChange : EventEmitter < any > ; public hideItems ( ) { this . isShowingItems = false ; } public selectItem ( item ) { this . hideItems ( ) ; this . valueChange . emit ( item ) ; } public showItems ( ) { this . isShowingItems = true ; } public toggleItems ( ) { this . isShowingItems ? this . hideItems ( ) : this . showItems ( ) ; } }