Merge pull request #2780 from maicongodinho/contained-list-action-data

Add contained list item action data

Author: zvonimirfras

src/contained-list/contained-list-item.component.ts

@@ -30,7 +30,7 @@ import {
 			</div>
 		</ng-container>
 		<div class="cds--contained-list-item__action" *ngIf="action">
-			<ng-template [ngTemplateOutlet]="action"></ng-template>
+			<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>
 		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush
@@ -41,6 +41,11 @@ export class ContainedListItem {
 	 */
 	@Input() action: TemplateRef<any>;
 
+	/**
+	 * Optional interactive element data.
+	 */
+	@Input() actionData: any;
+
 	/**
 	 * Whether this item is disabled.
 	 */

src/contained-list/contained-list.stories.ts

@@ -193,6 +193,54 @@ const withActionsTemplate = () => ({
 });
 export const withActions = withActionsTemplate.bind({});
 
+export const withActionsAndContextData = (args) => {
+	args = {
+		items: [
+			{
+				id: 1,
+				label: 'List Item'
+			},
+			{
+				id: 2,
+				label: 'List Item'
+			},
+			{
+				id: 3,
+				label: 'List Item'
+			},
+			{
+				id: 4,
+				label: 'List Item'
+			},
+		],
+		onActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`) }
+	}
+	
+	return { 
+		props: args,
+		template: `
+			<ng-template #actionWithClick let-actionData>
+				<button
+					ibmButton="ghost"
+					aria-label="Action"
+					iconOnly="true"
+					(click)="onActionClick(actionData)">
+					<svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>
+				</button>
+			</ng-template>
+
+			<cds-contained-list label="List title">
+				<cds-contained-list-item
+					*ngFor="let item of items"
+					[action]="actionWithClick"
+					[actionData]="item">
+					{{ item.label }} {{ item.id }}
+				</cds-contained-list-item>
+			</cds-contained-list>
+		`
+	}
+};
+
 const withIconsTemplate = () => ({
 	template: `
 		<ng-template #apple let-icon>