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.
how to use appendTo to attach an item to something besides body
-
- Posts: 13
- Joined: 18 Apr 2017, 01:39
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.
<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-stwowyRollFizzlebeef wrote: ↑16 Nov 2017, 19:21I 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.
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.dlarrieu wrote: ↑06 Mar 2019, 16:32This 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'"
The same question was posted on Github, but we were referred to this forum.
It appears that appendTo property should be use with an expression inside like or
https://stackoverflow.com/questions/302 ... useful-for
Code: Select all
@(...)
Code: Select all
@(body)
Code: Select all
@(#my_element) // where the element has id="my_element"
-
- Information
-
Who is online
Users browsing this forum: No registered users and 18 guests