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

UI Components for Angular
Post Reply
RollFizzlebeef
Posts: 13
Joined: 18 Apr 2017, 01:39

16 Nov 2017, 00:23

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.

RollFizzlebeef
Posts: 13
Joined: 18 Apr 2017, 01:39

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.

dlarrieu
Posts: 1
Joined: 06 Mar 2019, 16:17

06 Mar 2019, 16:32

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'"

j.lipka
Posts: 1
Joined: 05 Aug 2019, 16:03

17 Sep 2019, 14:23

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.

rfi
Posts: 1
Joined: 05 Nov 2019, 17:53

06 Nov 2019, 18:26

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests