Page 1 of 1

how to use appendTo to attach an item to something besides body

Posted: 16 Nov 2017, 00:23
by RollFizzlebeef
In the documentation on the website for appendTo it says "Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element."

I'm not sure what you mean by a "local ng-template variable of another element"

I tried adding a template variable like <div #container> and inside that div put the <p-calendar appendTo="container"> but it doesnt do anything. It still attaches it to the date input, which is the default behavior.

Can someone explain this to me? I would like to be able to use appendTo in order to attach a datepicker, menu panel, dropdown panel, etc to whatever element I want in the HTML.

Re: how to use appendTo to attach an item to something besides body

Posted: 16 Nov 2017, 19:21
by RollFizzlebeef
I figured it out, i wasnt using square brackets. if youre binding to another element using a template variable you have to use brackets to allow binding. Example with a Calendar:

<div #attachHere></div>

<p-calendar [appendTo]="attachHere"></p-calendar>

if you use appendTo="body" you dont need the brackets because its using the string value "body" to attach it to an html element. since theres only one body tag in an html page, this works, but if you were to do appendTo="div" I assume that wouldnt work because there could be many divs on the page. this is why you assign the div a template variable, and wrap the appendTo with brackets, so it can bind to that variable. at least that is how i understand it.

Re: how to use appendTo to attach an item to something besides body

Posted: 06 Mar 2019, 16:32
by dlarrieu
RollFizzlebeef wrote:
16 Nov 2017, 19:21
I figured it out, i wasnt using square brackets. if youre binding to another element using a template variable you have to use brackets to allow binding. Example with a Calendar:

<div #attachHere></div>

<p-calendar [appendTo]="attachHere"></p-calendar>

if you use appendTo="body" you dont need the brackets because its using the string value "body" to attach it to an html element. since theres only one body tag in an html page, this works, but if you were to do appendTo="div" I assume that wouldnt work because there could be many divs on the page. this is why you assign the div a template variable, and wrap the appendTo with brackets, so it can bind to that variable. at least that is how i understand it.
This doesn't seems to work. I made a blitzstack to try this : https://stackblitz.com/edit/github-stwowy

But I can't figure out how to use appendTo with anything else than body

And if you single quote, you get an error : [appendTo]="'something'"

Re: how to use appendTo to attach an item to something besides body

Posted: 17 Sep 2019, 14:23
by j.lipka
dlarrieu wrote:
06 Mar 2019, 16:32
This doesn't seems to work. I made a blitzstack to try this : https://stackblitz.com/edit/github-stwowy

But I can't figure out how to use appendTo with anything else than body

And if you single quote, you get an error : [appendTo]="'something'"
*thumbsUp* ... would be nice if anyone from the team puts a comment here about the current status, in best case with a working fork of the stackblitz provided by dlarriue. Even in the docs theres no example provided.
The same question was posted on Github, but we were referred to this forum.

Re: how to use appendTo to attach an item to something besides body

Posted: 06 Nov 2019, 18:26
by rfi
It appears that appendTo property should be use with an expression inside

Code: Select all

@(...)
like

Code: Select all

@(body)
or

Code: Select all

@(#my_element) // where the element has id="my_element"
https://stackoverflow.com/questions/302 ... useful-for