How to use attribute appendTo in primeNG in component ContextMenu?

Question

I´m trying to use the attribute appendTo in the component ContextMenu, but I want attach the behavior to one element, like a div.

Solved https://github.com/primefaces/primeng/issues/479 – Jhonatan Delgado Dec 16 '16 at 17:17 — Jhonatan Delgado, Dec 16 '16 at 17:17

asafrob · Answer 1 · 2017-11-02T08:54:02.903

15

on the element u want to append to add a hashtag #myHashTag and on the prime element u want to append add: [appendTo]="myHashTag" <- without the # sign

example:

<div class="recording-control-button" #stopbutton></div>

<p-confirmDialog [appendTo]="stopbutton"></p-confirmDialog>

edited Nov 02 '17 at 08:54

answered Nov 02 '17 at 08:27

asafrob

1,838
13
16

3

I'm doing the same with a sidebar component, but no matter what element I attach it to, it still takes up the whole space/height on the left of the screen :-( – AsGoodAsItGets Oct 05 '18 at 10:19
This solution worked with Angular 12 and PrimeNG 12 today. – Mycah Sep 13 '21 at 18:05

score 0 · Answer 2 · answered Dec 16 '16 at 17:36

0

I'm presuming you're using Angular 2?

Based on the information on the api for primeng context menu here:

PrimeNg context menu

You need to use a Angular 2 template variable, see here:

Angular 2 HTML variables

answered Dec 16 '16 at 17:36

Mark

44
4

1

can you elaborate on the template variable im not quite sure on how to use it – naoru Jan 20 '17 at 05:53

score 0 · Answer 3 · answered Jul 06 '22 at 10:07

I try this and it works - [appendTo]="'body or template or any Id'"

For example: <div #largeModal></div> - define anywhere in html, but in your project

Define this menu primeng in your html <ng-template let-item="rowData" <p-menu #menu popup="popup" [model]="items"></p-menu> <button type="button" pButton icon="fa fa-list" label="Show" [appendTo]="'largeModal'" (click)="menu.toggle($event)"></button> </ng-template>

How to use attribute appendTo in primeNG in component ContextMenu?

3 Answers3

Linked