I want to show dropdown in parent component and data is in child component and i need show the data when I select dropdown in parent component and i want to show the the data in child component based on selection using ngmodel.
You can use #output decorator and event emitter for sending the data from child to parent and to send the data from parent to child back you can use #Input decorator
Find my updated stackblitz example here
For more clarity please refer to below Angular IO official document : https://angular.io/guide/inputs-outputs
I have a vaadin grid in which I have information in. I would like the grid to instead of open a dialog, to route to a new page just like any other link would do.
I am using app-route, but am not understanding how to get to the next page.
Each row has its own ID which is all that should be passed in the routing.
I would like each row to have its own link when clicked too. So each id should be localhost:8000/dashboard/{{id}} by calling the same element that builds the page depending on the id passed.
Is there a way to do this out of the vaadin grid?
One way to do that with <vaadin-grid> would be to observe the activeItem property of the grid, and update the URL every time it changes:
1. observe the activeItem grid property
<vaadin-grid items="[[pages]]" aria-label="Navigation Links"
on-active-item-changed="_onActiveItemChanged">
<vaadin-grid-column>
<template class="header">Grid Menu</template>
<template>[[item.title]]</template>
</vaadin-grid-column>
</vaadin-grid>
2. define a new path based on the selected grid item
_onActiveItemChanged(e, detail) {
const activeItem = detail.value;
if (activeItem) {
// if a grid item is selected
this.path = `/dashboard/${activeItem.id}`;
}
}
3. update the current URL based on the path
(for client-side routing) <app-location path="[[path]]"></app-location>.
(for server-side routing) window.location.pathname = this.path;.
This example shows <vaadin-grid> 4, but the same principle applies to any other version of the grid as well.
I am trying to restrict querySelector to elements with the shadow dom created by a template with in the mainline of my web page. Here is a fragment of what I want to do:
<template id="userForm" is="auto-binding">
<div id=contents>
<my-element id='myElement>
</div>
</template>
<script>
var userForm = document.querySelector('#userForm');
Now I would like to able to do something like:
var myElement = userForm.querySelector('#myElement');
or
var myElement = userForm.$.contents.querySelector('#myElement');
But neither of these work. If the template were contained within a custom element I could use:
this.$.contents.querySelector('#myElement);
All of this in aid of making sure I don;t select an element with the same id outside of the template.
Anyone know how to accomplish this?
I can be mistaken, but I think all you need to do is
yourElement.shadowRoot.querySelector("#yourId");
Let's say I have a Polymer element x-foo which uses templates for data-binding.
<template>
<!--shadow DOM-->
<template repeat='{{item in items}}'>
<div class='content'>{{item}}</div>
</template>
</template>
items is a property of x-foo which decides what is present in the view.
Now, on the fly in one of the methods of x-foo I do:
this.items = getNewItemList();
and then try to access shadow DOM content,
this.shadowRoot.querySelectorAll('.content') // was supposed to return 5 elements
I find that Polymer still hasn't iterated through the template loop and generated my shadow DOM content. Is there a way to know when it has finished it?
By design, Polymer waits until your JavaScript has finished processing before it does expensive things like messing with DOM. That way you can do several operations at once and not worry about thrashing DOM and slowing down your application.
The short answer to your question is to do something like this:
this.items = getNewItemList();
this.async(
// `async` lets the main loop resume and perform tasks, like DOM updates,
// then it calls your callback
function() {
this.contents = this.shadowRoot.querySelectorAll('.content');
}
);
A better answer is to avoid needing to query for the elements. Instead, let the elements communicate with the container via events or even using the 'item' objects (the data model). If you can drive your UI from your data-model, and not the reverse, you will have a better time.
I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")