Develop Reference

Pass component template and functions while opening an expanded view in material dialog

I am trying to create components following DRY coding principles but I am stuck with a certain use case. I have a requirement to open an expanded view of a component in a dialog box. The component shows JSON records in a list format with pagination. PFB image:
As you can see there is an expand button(top right corner) which expands the component to a dialog box and shows records in a tablular format. PFB image:
Currently I have copied all the functions and template of the base component to the dialog component to make it work but it openly violates DRY principles and also a bad practice. I also need to keep both the components in sync with each other like the filters should be passed to both the components, etc.

How about a shared service? You put your logic there and then the components are controlling how output is displayed.
Or
Parent component controls how the table component displayed in a div with the selector or if it is opened in the dialog via dialog.open(YourTableComponent,...)

Using code (function/template) in a Vue.js application from one component in another component with no direct relationship

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.

UI architecture issue new angular app

Currently starting up a new project in angular 5 with ngrx and trying to figure out some architectural things.
The app should start with a page like some sort of dashboard. On top of the page you will have a bar with buttons which you can toggle some widgets(components).
The issue i am having now is i don't know which would be the best way to show these multiple components on the same page with that in mind that each of these components are living in a different module.
So in a nutshell the dashboardpage needs to show multiple components which can be hidden or shown via toggling the menu buttons on top, and each component lives in a different module. Actually each component will have some actions which will route you to a page in that module.
For example in my dashboard i will have a widget projects which contains a grid with all my projects and by double clicking a row i will get routed to the project page that lives in the projects module. I hope i was able to make myself clear. Thanks in advance for helping me in my search.
Thanks.

This will be easy with angular. Any component can be inserted anywhere else in the application using it's selector which appears at the top of the .ts file for the component. It can be imported as simple <html>, i.e.
<my-component> attach the *ngIf directive to have it only appear when a boolean is true.
<my-component *ngIf="myBoolean">
then when a dashboard button is clicked set that boolean to true. to close it, set it to false. So your app.html file could look like this:
<app-nav-bar (toggleOn)="setComponent($event)"></app-nav-bar>
which is your navbar component will be. there can be an emitter called toggle on that emits on click there and you can handle it in a setComponent function in app. In that function:
toggleOn(componentName: string) {
if(componentName === 'componentOne') {
showComponentOne ? showComponentOne = false: showComponentOne = true;
}
//...for your components.
}
then in the html in app.html place your components and put an *ngIf on them tied to their boolean.
In the nav-bar component your event emmiter will work like this:
first here's a button which toggles on the component:
<button (click)="toggle('component1')">Component 1</button>
then in the .ts file handle this component in the toggle function:
toggleOn = new EventEmitter<string>();
toggle(componentName: string) {
toggleOn.emit(componentName);
}
Using this strategy should solve your problem but there are many approaches. A good read on the many techniques to communicate data in angular comes from the angular docs. https://angular.io/guide/component-interaction Read it with focus and you'll be a much better developer!

Angular JS 2 -- Application Design

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.

Showing only certain Custom Sidebar Components on All Pages

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.