UI architecture issue new angular app - javascript

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!

Related

How to setup nested routing and nested components in ReactJS

I am trying to implement a Dashboard (Admin-UI) using ReactJS, but the problem is I can't set up the nested routing and components for that. I want to load the components on the same page (Home) without going to a new page, as well as loading components based on the SideNav. How to do that?
Admin-UI
A very high level way to achieve this to be:
have a home component, which contains 2 components, side nav and display screen.
declare all the controlling states in the home component and pass them as props for the 2 child components.
Use side nav to change the controlling state in home component and use those states and some conditional logic to render the components inside display screen.
Also, please add a code snippet in future. People will be able to help you better.

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.

Angular 2 & 4: NgIf/else condition for showing directives on window load

I am new to Angular 2 & Angular 4 and working on a web app, that should display two components in the viewport, which are overlapping. When the application loads for the first time (onLoad), it should display the first component. The user can interact with the component then. When the user interacts with the viewport, another component - with the same reserved space as the first component - should be displayed. I am looking for an NgIf-/Else-Condition for something like this:
<component-1 *ngIf="windowOnload()" display component-1></component-1>
else display
<component-2></component-2>
I also need to implement some logic in the component, which details the condition; so the condition is:
When the window loads, display Component 1, else display Component 2.
As I am new to Angular 2 & 4, any hints & code samples would be appreciated, thank you!
Normally, you bootstrap your Angular application with the first component that you want to display. You would do that using routing. So you would route to your component-1.
Then I'm not clear on what triggers display of the second route, but you would normally then route to that second component on the desired action.
If you want an example of an Angular application with routing, I have one here: https://github.com/DeborahK/Angular2-GettingStarted

How To Use React or Angular To Create Reuseable Galleries That Only Load When Needed

I'm a self-learner and this is just one of the things I cannot wrap my head around. I use nodejs for all my web applications and wondering if react can solve the problem I am facing.
The problem: what todo when you need to show a pop-up image gallery that showcases multiple images. But we don't need to look this gallery every time the page loads, only when using clicks the open galley button.
A similar example would be what Airbnb have achieved on their listing pages:
https://www.airbnb.co.uk/rooms/432044
Now the page doesn't load all the gallery pictures when page first renders.
But when you click on the view photos, it opens the gallery, but then loads the pictures and I've noticed it has a div containing data-reactroot.
Are they using some sort of react magic? Or is it angular?
I'd really love to be able to build my components for easy reuse, but more importantly, I'd just like to understand what's going on so that the gallery content is only loaded when the photos are opened.
If someone can summarise in a paragraph, what is going on, I'm sure I can go away and learn to replicate it. I'm just not sure what I'm trying to replicate at the moment.
You can use React for that, you just need a conditional render. Basically you have a toggle in the component's state (a simple bool). And in your render for the parent component you can have something like:
render() {
<div>
...
{ this.state.showPhotos ? <PhotoPopup /> : null }
...
</div>
}
If the toggle is false, that component won't get rendered so it doesn't load. When they click the button and change the state, the toggle is true so that component WILL get rendered and the photo popup will be displayed (loading photos in the process).
That's one way to do it in React anyway. Don't forget to handle loading of photos (i.e. have some visual indication that photos are loading)
The basic approach is that you write a small React or Angular app. The responsibility of this app is probably just to render a "show photos" button, and then when it's clicked dynamically add the photo gallery HTML to the page, which is turn triggers the browser to download the images. The app and all its logic is bundled up in a single JavaScript file.
Have a read of the React docs,
https://facebook.github.io/react/docs/hello-world.html
Then start with create-react-app. It's Facebook's recommended way to build simple to medium complexity apps - it's all you'll need to achieve the above.
https://github.com/facebookincubator/create-react-app

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.

Categories

Resources