I am new in angular 4. I found out that there is a way in angular to pass data from the parent component to the child component using #Input just like following:
<child [dataToPass]="test"></child>
My question is how to do the same thing using a router. In the router, there is no child definition like <child></child>; it only has <router-outlet></router-outlet>, so how do I pass data using #Input?
The only way is to use a shared service or use Ngrx.
Component added by the router is added as sibling to
and does not replace it
What you want to achieve is to prefetching data from component to another when transferring via router.
I highly suggest using a resolver to load the data as explained here.
This will allow you to not only pass data via the router but also will the second component/page wait till the data is fetched so you don't run in a case of "my site is loaded but no data is displayed" ;) if you need further help with the implementation feel free to comment on this and share some code in your question.
Related
I am working on a large web application written using AngularJS. Unfortunately, I only know Angular well from version 2, so I have a question about data passing. I need to develop a component that makes use of an existing component (whose code is really long and complex) and dynamically shows results based on the existing component. So I have a template of my component like this (my-component.html):
<div>
<ng-transclude></ng-transclude>
</div>
<!-- Here I have to write the logic to dynamically display the information arrived with ng-trasclude -->
The template in which I use my component will then look like this:
<my-component>
<component-made-by-other-developers
data1="$ctrl.CertainTypeOfObject"
data2="anotherTypeOfObject"
></component-made-by-other-developers>
</my-component>
The question is: how do I use the data (in the example data1 and data2) of the component developed by other developers within MY component (i.e. in the my-component.js and my-component.html files)? My problem is that the ng-transclude directive seems to give no access to the data of the other components (passed in input) if I want to use them in my own component. The question is: how can I use these data in my component (both template and controller)?
Try using ng-include inside your component and pass the data by using onload
Your code should look something like this:
<div ng-include="otherDeveloperComponent.html" onload="passedData=$ctrl.CertainTypeOfObject; source='myComponent'" ng-if="true">
I have created a component outside app using the Angular CLI (in src folder)
../src> ng g c test
And added the component import in app-modules.ts
I'm not able to access the test.html file separately (I want to execute the code in the ngOnInit method of test.ts) as below
http://localhost:4200/<<context_path>>/test.html
I even created HTML and a JavaScript file and tried to access, however that didn't work.
Kindly let me know is it possible to access the HTML?
Thanks for the response. Below the screenshot
Application screenshot
i want to access like http://localhost:4200/test.html
this called bad approach you shouldn't create components out of src folder i don't mean by that is not gonna work but not recommended to do that src folder excite to gather all your project component to make it easy to access and sharing the data between them.
alternative solution 1: you can delete the component you made out of src folder and recreate another one in app folder or simply move the component files/folder in the app that's the correct approach.
then you can access to it from any other component in your app by import it in ts file
alternative solution 2: if you want just to sharing data or executing method/function that maybe shared by two components that holds some data you can use services or event binding.
alternative solution 3: if your problem with routes and you want to naviagte to this test.html for recommended approach firstly move it inside the app folder like alternative solution 1 then use routes and it's config to create a route for this component.
notice: you couldn't inject only html file inside angular components it must has his own ts file that holds the component config #Component({...}) that's how angular knows that's component excite and how to inject it to other components.
For some reason I can't register new components. I got a few of them and when I try to register new one I get:
Unknown custom element: <store> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
This is my app.js file:
Vue.component('example', require('./components/Example.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('loginmodal', require('./components/LoginModal.vue'));
Vue.component('products', require('./components/Products.vue'));
Vue.component('store', require('./components/Store.vue'));
And Store.vue is basically duplicated Example.vue so no point in posting that. I tried using already created components on page like register for example and it works just fine for some reason. You should also know that I'm using Laravel where Vue is pre-included and already set up by default with example component already created.
Here is my guess: you are using the component store in one of the other components listed above before registering it globally.
This could probably be adressed by changing your registering order, but I would advise you to register them locally to each component instead.
See: https://v2.vuejs.org/v2/guide/single-file-components.html
I was working on an EmberJS application developing.
I defined a route and a template for it
And there is a little button, which id is myBtn in that template
I wonder how and when i can reference that button in my route.js
If there is no way,i think i may wrote a single component and wrap it in that route(template),course,element reference in component is clearly and easily
Hope there is a hint for me
Thanks
In most cases there is no need for you to reference dom element (your button) in the route, your button and route should be loosely coupled it is how ember encourages building apps. Instead you should use actions/events to control your app or wrap it in component if you really need reference to dom.
I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?
you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component