I am trying to call a component from another component on function calls.
In my Project, I have a total of two components.
pages/component1/
pages/tables/maintables
as mentioned above I have a total of two components defined in Angular 7.
Now in component1 component, I have a function which is I am calling from another function in the maintables component.
below is a code how I am calling a component in function.
this.router.navigateByUrl('/component1');
but the above line is not working properly.it is not redirected to the component1 component.
can anyone help me in this how to call another angular component from a different component?
Thanks in Advance!
all the problem is resolved now, I import the component in both app.routing.module + another module which is the parent module of my all components.
So it resolves my issues.
Thank you so much to all for your help.
Related
I've been experimenting with the dynamic component loader in Angular2. An issue, possibly related to this: https://github.com/angular/angular/issues/4330 , seems to be that once a component is loaded with, say, the loadIntoLocation() function, the injector cannot find the parent component's injector or the things that were injected into it. As that article suggests, you can pass an array of Resolved Providers obtained from the parent's injector (Injector.resolve) into the last parameter of loadIntoLocation().
This seems to work initially, but I have also found that any children of the dynamically loaded components also have the same problem. The injector of the children does not know to look up the injection tree for providers, so a standard injection in the constructor of the children like
constructor( myComponent: MyComponent)
does not work. The children (of the dynamically loaded components) are not dynamically loaded but just "normally" instantiated using a template, selector etc. I am wondering:
Is this (still) a known issue or am I misunderstanding anything?
If a known issue is there any workaround at the child level? I tried a constructor as above and also using #Host and also using forward ref + #host but none work. Is there another way to manually pass bindings to a component that is not dynamically loaded?
Is there any other possible workaround for this?
The problems seems to be caused by the resolved providers passed to loadToLocation(). DI is hierarchical and DI tries to resolve required types by walking the hierarchy towards the root, but the chain is broken at loadToLocation() because there providers are passed instead of a child-injector.
The dynamically added component and its children can only resolve providers passed to loadToLocation() or listed in the providers list of the dynamically added component itself (or one of its children if it is a (grand-)parent of the actually resolved component).
When DI walks upwards from within the dynamically inserted tree to resolve a dependency, the iteration stops at the component added by loadToLocation() because the injector of this component doesn't have a parent injector (which would be the injector of the host component where the dynamically added component was added).
See also https://github.com/angular/angular/issues/5990
Correction on this. I have conflated another problem in my code with what I thought was the bug described above. The children of my dynamically loaded component were derived from abstract classes. I was trying to inject the abstract class into the children as opposed to the actual implementation which, per this
Interface based programming with TypeScript, Angular 2 & SystemJS
I have learned you cannot do. The injection tree does get broken upon a dynamic load (which I do think should be corrected), but I take back the part about the children thereafter not being able to traverse their own tree. Thanks for the comments - it helped me sort it out.
Think of the following:
I've got a table data grid webcomponent and another component providing a data feed. In the applications main acting as kind of controller, i'd like to wire and setup those two components. Therefore i need a reference to underlying table grid instance Dart class and call methods on the "Component API' (to provide the table grid's tablemodel with data).
How do I access the Dart Class instance of a webcomponent instance from outside ?
Probably I missed something fundamental or are polymer webcomponents meant to interact only using databinding and stringy attributes stuff ?
Follow up: Found it !!
RLTable table = querySelector("#apptable").xtag;
does the job
As zoechi pointed out, xtag is not necessary.
var component = $['myComp'];
var componentXtag = $['myComp'].xtag;
print(component == componentXtag);
prints true. Therefore both
component.method()
componentXtag.method()
work fine
You don't need xtag. Some weeks/months ago this was a workaround until the final solution was landed.
I created my dart web component that extends a DIV element.
In DART I can add a DIV element to the DOM with:
DivElement div = new DivElement();
document.body.elements.add(div);
Dart html api
Can I do the same thing with my web component?
What's the right syntax?
Web UI Specification has a section about web component instantiation:
http://www.dartlang.org/articles/dart-web-components/spec.html#instantiation
... call new FooComponent.forElement(elem) in Dart. We don’t recommend
using this approach because this constructor call cannot be used by
itself–it requires several set up steps. We might have runtime
libraries to make this easier in the future ...
I would like to build a new component on the basis of PrimeFaces Tab/Tabview components. It should look like an add tab in a browser and open a page for filling out a form. The problem is that I want to integrate it in a TabView based on a data model (http://www.primefaces.org/showcase/ui/tabviewModel.jsf). Right now I can either combine a tab for filling out a form with a tab with predefined data or use a TabView, which dynamically creates tabs for my data.
I have read JSF documentation about creating custom components in two ways - as composite component or as a new Java class. I tried to create a custom component but it does not seem to work the way I described beyond.
My questions are:
1) is it possible to solve this problem with a composite component? If yes, could someone give me a hint?
2) if not, is there a tutorial for writing a new component on the basis of existing PrimeFaces component (presumably new sort of TabView)?
UPD: After doing some research I realized that the easiest way is writing a new renderer for TabView.
I declared a new renderer class:
public class AddableTabViewRenderer extends TabViewRenderer
and registered it in faces-config.xml:
<render-kit>
<render-kit-id>HTML_BASIC</render-kit-id>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.TabView</renderer-type>
<renderer-class>
de.idealo.evaluation.jsf.webapp.component.AddableTabViewRenderer
</renderer-class>
</renderer>
</render-kit>
However, when a view with TabView component is rendered, the encodeEnd method of TabViewRenderer is called, not the overriden method of AddableTabViewRenderer.
Can you give me a hint about where the problem might be?
The renderer-class is wrong in my configuration. I misunderstood the instructions about registering a component. I thought that render-type is the class that will be rendered with the custom renderer. It must be org.primefaces.component.TabViewRenderer instead. Now it works fine :)
I have common code that I want in various events for our standard jqGrid configuration.
I use $.extend($.jgrid.defaults, { }); to set some code for the following:
loadError()
beforeRequest()
loadComplete()
gridComplete()
Now, when I define an instance of my grid, there is a potential that I would like to execute more code in any of these events.
My initial solution was to have global variables, e.g.: loadCompleteEx() and if they are defined, call them at the end of the default method calls. This was great if I only had one grid on the page, but I am trying to implement a solution that would work regardless of how many grids are on the page.
Is there some way to hook in and add a method to execute when any of these events are fired? I'm using jqGrid 4.1.2 and jQuery 1.6.
Thanks in advance for your help!
You can .bind() your own functions to events, so that your function executes with the event. You could use this to bind different events to each grid, or bind one function to every grid at once.
.bind() also allows binding to standard javascript events, custom events, or even undefined strings which you later call with .trigger().
It needs to be attached after a selector, which can select a specific grid or multiple grids in your case.
$('#Your-Grid-Selector').bind('eventToBind', functiontoBind() {
alert('Triggered eventToBind');
});
jQuery Documentation
Edit: This question may be a duplicate of this SO Question, which has a good solution you can use for this very issue.