feat(popup): Accessing context variables from within popup template

[genuinefafa]

I'm creating a site where a popup uses a template that needs access to data from scope (let's thing of it as a popup assigned for every item in a *ngFor).

How can I do that? Couldn't find it in the docs.

[edcarroll]

Have you tried defining the <ng-template> inside the *ngFor, like so:

<div *ngFor="let item of items">
    <ng-template #template>
        <p>{{ item.name }}</p>
    </ng-template>
    <button class="ui button" suiPopup [popupTemplate]="template">Action</button>
</div>

[edcarroll]

Just made a plunkr demonstrating this - does that suit your use case?

[genuinefafa]

Ok @edcarroll you've got this one. I was trying to use the template outside the element, using it inside the iteration did the trick, nice catch. Maybe add it to the docs? either way this issue will work as a heads up for anyone looking for a solution.

My exact use case is via sui-select and is written like this

<ng-template let-option #selectTemplate>
	<ng-template #popupTemplate>
		<div class="header">{{ option.field }}</div>
		<div class="content">
			{{ option.otherField }}
		</div>
	</ng-template>
	<div suiPopup [popupTemplate]="popupTemplate" popupBasic="true" popupPlacement="bottom right">
			{{ option.field }} ({{ option.id }})
	</div>
</ng-template>					

<sui-select [(ngModel)]="selected" [options]="options" [optionTemplate]="selectTemplate" labelField="field" [isSearchable]="true" #select>
	<sui-select-option *ngFor="let option of select.availableOptions" [value]="option">
	</sui-select-option>
</sui-select>

[edcarroll]

Glad that's sorted it, and yes good idea, will add a note to the docs

[genuinefafa]

One idea just crash my mind... what if I wanna reuse templates? this workaround will not fix the underlying issue...

What about adding a let-thingie in order to pass variables to the popup? Maybe just like sui-select does with its own options via let-option.

Will result in a code like this

<!-- look for let-var and its usage -->
<ng-template let-var #popupTemplate>
	<div class="header">{{ var.field }}</div>
	<div class="content">
		{{ var.otherField }}
	</div>
</ng-template>
<!-- look for [value] attr -->
<div suiPopup [popupTemplate]="popupTemplate" popupBasic="true" [value]="option">
		{{ option.field }} ({{ option.id }})
</div>

[edcarroll]

This isn't a bad idea actually... Though I've made a tonne of changes to the popup component in the datepicker, so will leave this for now until I've merged those changes, otherwise it's futile!

[genuinefafa]

Ok then, let's wait for the next release! How can we follow this feature request?

pst: this issue is still with label investigating

[edcarroll]

@genuinefafa this will be in the next release. You can bind a context by setting popupTemplateContext, and you can access it in the template like so:

<ng-template let-popup #popupTemplate>
    {{ popup.context.myVariable }}
</ng-template>

[edcarroll]

This is now live in 0.9.5. Let me know if you have any further issues 😄

[genuinefafa]

I see no example using context in docs. Can we add it there too?

[Gimly]

I've just tried making it to work, with no luck. Here's the code I have:

...

<tr *ngFor="let person of people">
    <td>{{ person.id }}</td>
    <td>{{ person.name }}</td>
    <td>
        <div class="ui buttons">
            <a class="ui button" [routerLink]="['edit',person.id]">
                <i class="edit icon"></i> Edit
            </a>
            <button class="ui icon button" suiPopup [popupTemplate]="confirmDeleteTemplate" [popupTemplateContext]="person" popupTrigger="outsideClick" #popup="suiPopup">
                <i class="delete icon"></i> Delete
            </button>
        </div>
    </td>
</tr>

...

<ng-template let-popup #confirmDeleteTemplate>
    <div class="header">Delete person</div>
    <div class="content">
        <p>You are deleting this person, are you sure?</p>
        <div class="ui buttons">
            <button class="ui positive button" (click)="deletePerson(popup.context.id)">Yes</button>
            <button class="ui negative button" (click)="popup.close()">No</button>
        </div>
    </div>
</ng-template>

I'm getting an error because context is undefined, so it seems that the context is not correctly set. Any idea to why that would be? I'm using version 0.9.6

Thanks in advance.

[genuinefafa]

are you using latest version of semantic-ui? can you provide an example plunkr?

…

On Fri, Aug 25, 2017 at 5:47 AM, Xavier Hahn ***@***.***> wrote: I've just tried making it to work, with no luck. Here's the code I have: ... <tr *ngFor="let person of people"> <td>{{ person.id }}</td> <td>{{ person.name }}</td> <td> <div class="ui buttons"> <a class="ui button" [routerLink]="['edit',person.id]"> <i class="edit icon"></i> Edit </a> <button class="ui icon button" suiPopup [popupTemplate]="confirmDeleteTemplate" [popupTemplateContext]="person" popupTrigger="outsideClick" #popup="suiPopup"> <i class="delete icon"></i> Delete </button> </div> </td> </tr> ... <ng-template let-popup #confirmDeleteTemplate> <div class="header">Delete person</div> <div class="content"> <p>You are deleting this person, are you sure?</p> <div class="ui buttons"> <button class="ui positive button" (click)="deletePerson(popup.context.id)">Yes</button> <button class="ui negative button" (click)="popup.close()">No</button> </div> </div> </ng-template> I'm getting an error because context is undefined, so it seems that the context is not correctly set. Any idea to why that would be? Thanks in advance. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#127 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABeGXeHoiEcIZxQRXtNUqlBwtCHbf7ZCks5sboo-gaJpZM4OEDll> .

[Gimly]

@genuinefafa Yes, I'm indeed using the latest version of semantic-ui.

Here's a plunkr that exhibits the issue.
http://plnkr.co/edit/l2T5T4GoriTWcigPNECj?p=preview

Thanks for your help.

[edcarroll]

@Gimly thanks for the plunkr. Hmmm, looks like a bug. Will reopen for now and assess properly when I get a chance. Sorry for the delay!

[arron21]

@edcarroll any news on this?

[bikash8gupta]

Any news on this?

[gabrieldoty]

@edcarroll - is this still an outstanding bug? I am seeing similar behavior in the current alpha build

[aimoradajr]

Still not working for me. Halp

[rahul-uttarkar]

I have checked its still not fixed. I am waiting for it too..

[janpapenbrock]

Just in case anyone is stumbling across this again. This is how it works:

<div suiPopup [popupTemplate]="popupTemplate" [popupTemplateContext]="{ myVariable: 42 }">
  hover here
</div>

<ng-template let-context="context" #popupTemplate>
    {{ context.myVariable }}
</ng-template>

[Belouccio]

@janpapenbrock thank you man) you saved my day!