Merge pull request #540 from rudolpho1/master

Support render template in dropdown component

Author: zvonimirfras

src/dropdown/dropdown.component.ts

@@ -9,7 +9,8 @@ import {
 	ViewChild,
 	AfterContentInit,
 	HostListener,
-	OnDestroy
+	OnDestroy,
+	TemplateRef
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -66,7 +67,12 @@ import { DropdownService } from "./dropdown.service";
 					<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
 				</svg>
 			</div>
-			<span class="bx--list-box__label">{{getDisplayValue() | async}}</span>
+			<span *ngIf="isRenderString()" class="bx--list-box__label">{{getDisplayStringValue() | async}}</span>
+			<ng-template
+				*ngIf="!isRenderString()"
+				[ngTemplateOutletContext]="getRenderTemplateContext()"
+				[ngTemplateOutlet]="displayValue">
+			</ng-template>
 			<ibm-icon-chevron-down16
 				*ngIf="!skeleton"
 				class="bx--list-box__menu-icon"
@@ -97,9 +103,9 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 */
 	@Input() placeholder = "";
 	/**
-	 * The selected value from the `Dropdown`.
+	 * The selected value from the `Dropdown`. Can be a string or template.
 	 */
-	@Input() displayValue = "";
+	@Input() displayValue: string | TemplateRef<any> = "";
 	/**
 	 * Size to render the dropdown field.
 	 */
@@ -358,23 +364,41 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * if there is just a selection the ListItem content property will be returned,
 	 * otherwise the placeholder will be returned.
 	 */
-	getDisplayValue(): Observable<string> {
+	getDisplayStringValue(): Observable<string> {
 		if (!this.view) {
 			return;
 		}
 		let selected = this.view.getSelected();
-		if (selected && !this.displayValue) {
+		if (selected && (!this.displayValue || !this.isRenderString())) {
 			if (this.type === "multi") {
 				return of(this.placeholder);
 			} else {
 				return of(selected[0].content);
 			}
-		} else if (selected) {
-			return of(this.displayValue);
+		} else if (selected && this.isRenderString()) {
+			return of(this.displayValue as string);
 		}
 		return of(this.placeholder);
 	}
 
+	isRenderString(): boolean {
+		return typeof this.displayValue === "string";
+	}
+
+	getRenderTemplateContext() {
+		if (!this.view) {
+			return;
+		}
+		let selected = this.view.getSelected();
+		if (this.type === "multi") {
+			return {items: selected};
+		} else if (selected && selected.length > 0) {
+			return {item: selected[0]}; // this is to be compatible with the dropdown-list template
+		} else {
+			return {};
+		}
+	}
+
 	getSelectedCount(): number {
 		if (this.view.getSelected()) {
 			return this.view.getSelected().length;

src/dropdown/dropdown.stories.ts

@@ -118,6 +118,43 @@ storiesOf("Dropdown", module)
 			theme: select("theme", ["dark", "light"], "dark")
 		}
 	}))
+	.add("With Template", () => ({
+		template: `
+		<div style="width: 300px;">
+			<ibm-dropdown
+				[theme]="theme"
+				placeholder="Select"
+				[displayValue]="dropdownRenderer"
+				[disabled]="disabled"
+				(selected)="selected($event)"
+				(onClose)="onClose($event)">
+				<ibm-dropdown-list [items]="items" [listTpl]="dropdownRenderer"></ibm-dropdown-list>
+			</ibm-dropdown>
+			<ng-template #dropdownRenderer let-item="item">
+				<div *ngIf="item && item.content" style="font-size: 14px;">
+					<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
+							width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" style="will-change: transform;">
+						<path d="M9.3 3.7l3.8 3.8H1v1h12.1l-3.8 3.8.7.7 5-5-5-5z"></path>
+					</svg>
+					&nbsp;{{item.content}}
+				</div>
+			</ng-template>
+		</div>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one", selected: true },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed"),
+			theme: select("theme", ["dark", "light"], "dark")
+		}
+
+	}))
 	.add("Skeleton", () => ({
 		template: `
 		<div style="width: 300px">