Good afternoon everybody.
Let me better explain the situation.
In a myComp.html I got the instance of some dropdown-buttons from another component <app-myButtonsFromAnotherComponent></app-myButtonsFromAnotherComponent>.
The dropdown-buttons are being displayed correctly BUT when I try to get the script which they are originally connected myButtonsFromAnotherComponent.ts they do not seem to communicate at all with it (I am using a Getter function in the .ts but it doesn't retrieve the datas) and at the same time, because of the instance, I cannot access their values from myComp.html either, I can just display the buttons on the screen and display the values through {{theValueInQuestion}} int their original HTML file.
Can anyone, please, help me to get those values and use them in my script?
PS Why "reusable" in the title? Because in such a way I can keep those buttons in a separate component and let other components grab them without copy and paste a ton of code.
They are two separate components you need a way to communicate between components.
you can look more into :
Localstorage
Output() and EventEmitter
Parent to Child via Input
Related
I have a website that has a sidebar on it with way too many elements on it and I would like to write a browser add-on (available for as many modern browsers as possible) that lets users adjust the elements on the sidebar. Luckily I have access to the original React component that is used for the sidebar. I imagined the addon would work as follows:
A settings page allows users to design their own sidebar. For this, I believe I somehow must fetch the site content (which is probably React code) execute it (?), and find the node that I want to replace. Then I grab the elements on the sidebar to fill the default sidebar that the user can then configure to their own needs. Is executing the react code to get the elements the right approach here? If so, how would I do that?
When the user goes to the web page, a script is executed that will either find the dom element and replace it and update it each time the React Dom is updated (? not sure if that is even possible) or somehow locate the component in the React script and edit that. Again, not sure if that is even possible. An alternative would be to create an empty div and populate it with my custom component while setting the display property of the original component to none.
I would really appreciate it if somebody could let me know whether what I am trying to do is even possible, whether I am on the right track, and maybe can give me some hints on where to look for further information on how to achieve such a thing.
In my application I have some modules which should have the possibility to upload images.
I created a child component for handling the image uploading, for easy reuse.
The problem is when I upload image from one of the child components it is always displayed in the first component instance.
I have replicated the issue here:
https://stackblitz.com/edit/angular-ivy-6ug9f6
Anyone knows what the problem is?
Both of your file inputs have the same id, so when you click the second label, it refers back to the first input. Try generating a dynamic id for each input and that should do the trick.
Hi my angular form is getting hanged when am try to scroll up and down and try to select drop down options, selecting items in list control. My form contains input controls which has regex patterns, controls. All these controls are in my child html form.
And if i clear cache its working fine.
Please suggest me to fix this issue.
Calling a method function from direct html can be costlier Operation which might have called your application function multiple times apart of life cycle hooks.
It's better to use always variable instead of functions if you are not using it already. Please share your code snippet or stackblitz url for better help from community
I've already asked a similar question, but I really can't figure out how to connect these elements together. I'm still not very good with Handlers, and I guess my question is:
How can I access UI Widgets (and their children) while outside of the doGet() function?
My use case is this: I have a list of projects/IDs. I have all the data I want based on the ID that will populate the Project Details tab of this application. I created 'unique' Buttons for each of these Projects, and threw them into a Grid. Now, I want to generate the Project Details (detailPanel) Widgets specifically for each Button if/when it is clicked.
I have the Project ID attached to each Button (uniquely) through a Hidden, but I can't seem to attach the Project Details tab (detailPanel) to the Button so that, when clicked, I can set the values for the TextBox, DateBox, ListBox, etc. Widgets of the detailPanel.
I think I'm missing something obvious about this. I want to avoid attaching each child Widget of the detailPanel as a callbackElement of the Button at all costs. There are around 40 elements (I've lost count), and it seems really inefficient. I'm almost sure that if I can add one Widget as a callback element, that I get access to all child Widgets. But I tried, and that doesn't seem to be the case.
Here is the link to the public UiApp, which shows the UI. And the sister Script Project (uneditable).
You dont need to add callback elements that you will write to, callback elements are only for reading their data. If the detailspanel id is dynamic have a hidden that has its id stored inside and pass it to the handler. from your handler you getelementbyid and set its data.
I'm trying to figure out how to bind a javascript event to a select element in GWT, however the select element isn't being built in GWT, but comes from HTML that I'm scraping from another site (a report site from a different department). First, a bit more detail:
I'm using GWT and on load, I make an ajax call to get some HTML which includes, among other things, a report that I want to put on my page. I'm able to get the HTML and parse out the div that I'm interested in. That's easy to display on my page.
Here's where I get stuck: On the portion of the page I'm using, there's a select element which I can easily locate (it has an id), but would like to capture event if my user changes that value (I want to capture changes to the select box so I can make another ajax call to replace the report, binding to the select on that page, and starting the whole process again).
So, I'm not sure how, once I get the HTML from a remote site, how to bind an event handler to an input on that fragment, and then insert the fragment into my target div. Any advice or pointers would be greatly appreciated!
How about this:
Element domSelect = DOM.getElementById("selectId");
ListBox listBox = ListBox.wrap(domSelect);
listBox.addChangeHandler(new ChangeHandler() {
void onChange(ChangeEvent event) {
// Some stuff, like checking the selected element
// via listBox.getSelectedIndex(), etc.
}
});
You should get the general idea - wrap the <select> element in a ListBox. From there, it's just a matter of adding a ChangeHandler via the addChangeHandler method.