I have a parent component with three child components:
Navigation - Navigate Between Pages.
Pages - Loads pages using Route outlet(Employee, Department).
Save Components - Saving that form once validated.
The code looks like:
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-save></app-save>
So I want some way of communication between Pages (which loads dynamically when the route is called. It contains different types of forms) and Save.
So once user click "save" from save component it should go to loaded component(employee, department) function, checks whether form is valid or not if yes then save the form.
I looked at many examples online:
Communicate between sibling components Anguar 2 (This won't work as my sibling is loading dynamically).
https://angular.io/guide/component-interaction
Also, I thought of creating a service but not sure how to get the function from the loaded components.
Any suggestion?
Related
I display tons of components on my page. I have a feature that allows the user to type in the name of a component and then jump to that component via scrollIntoView, using the id. This currently works because I do have all my components rendered on the page (thus in the DOM).
Problem:
I'd like to use Apollos fetchMore helper, and only show 50 components at a time. But this will remove the other components from the DOM, so it seems my jumpToComponent() function will break: Say a user is on page 1 (components 1-50) and wants to jump to component no. 80.
I'm working on an app using Vue.js and I came across the following challenge:
The app has a pretty basic layout: a header, a main view and a navigation section at the bottom. Depending on the page the user is currently on I want to show a main action in the header. See the following wireframes:
My question now is: is there a way to "inject" the template and code into the header? Because ideally I would like to have the logic and the appearance (like an icon with label) in the corresponding component and not in the header, because it isn't aware of the current view.
The header and the main view of the components have no parent/child relation. The basic Vue.js template looks like this:
<div class="app-content">
<TheTopBar/>
<main>
<router-view></router-view>
</main>
<TheNavigationBar/>
</div>
I see two ways to do it...
Add default slot into TheTopBar template at the place you wanna see your actions
Remove TheTopBar component from your top-level component, place it inside your "main view" components templates (each of them) and define content of the slot there (actions)
Other way could be using Vue router's Named Views but that would require you to create separate "actions" component for each corresponding "main view" component
Edit
Actually there is other way. portal-vue allows exactly what you want....
The short answer is no, you cannot inject code from one component to another. You will have to have the template logic inside the header component.
However, there are a couple of things you can do.
Inside the header component you can check what the current path is with this.$route.path. And based on that display the action item. (if you are using a router)
Use a vuex store to track what the action item in the header should be. You could have the main component set the store value and header can then read it and act accordingly
I hope this answers your question.
my angular application consist of some common custom filters with different report pages.
User Can navigate from one page to another page and he can change filter for each page.
Need to add feature so common filters would maintain for each page.Whenuser navigated back to previous page it should display same filters that user selected in previous page.
For Above use case is it right to use ng-redux else how i can achieve this in angular 4
Please suggest best approach.
I assume by navigating from one page to another, you are basically routing to different routes. Therefore to have the information of your selected filter for each page, you can add that information to the routing parameter.
Something like this:
this.router.navigate(['/your_route_name',{parameterName: parameterValue}]);
And on the routed component, it can be received as such:
this.route.snapshot.paramMap.get('parameterName')
Or else you can have a service running globally between your routes, which is not recommended as it populates the global space unnecessarily.
I got one main component for the FORM and have three component for sections
Now in the main form i have submit button which i want to use to submit all the section(s) data to a service?
How can i achieve this?
Do i use output event emitter in all the section components and get the data in the main form component before submitting?
Thank you
---------------------- initial question below ------------------------
I am creating a Form (with multiple sections) in angular2 and this form will be part of a approval workflow.
The workflow will be not in angular2, although the form will be referenced from the workflow. When we open the form from different stages of the workflow it will allow user to view or edit only certain sections of the form.
How should i design my form with sections?
1) one component for the entire form?
2) separate component for each sections and having one main parent component?
on the form load; run business logic check to find what section needs to be rendered in view and edit mode AND for business logic have a separate component which will check what section is loaded and in what mode
Please suggest an application design.
The key thought here is re-usability and business logic.
Extract reusable components as their own component.
Lets say I have these components in my app ...
Child Component A - some form inputs that i will reuse elsewhere
Child Component B - Some form stuff that I will reuse
Parent Component A ...
Child Component A
And some stuff i wont reuse
Parent Component B ...
Child Component A
Child Component B
And some different stuff
Route Component, renders parent A or B depending on business logic as determined by incoming params / data.
Also, you might want to use attribute directives to add functionality to form elements. e.g. an attribute directive that transforms an input into a datepicker.
We have about 10 custom home page components. I need to show one of them on pages for a custom object called "Registration".
There is a setting in the Setup/App Setup/Customize/User Interface, to "Show Custom Sidebar Components on All Pages". The problem is that it will show all 10 custom components on all pages, while I only need one displayed. Any ideas how to do that?
As a side note, this custom component consists of JavaScript that injects a custom lookup window link into the standard page layout.
How about you combine the components into one component and then use javascript inside the component to determine (based on document.location) whether to show the sub-components.