While I was messing with routing in Angular, I tried using an in memory database to fetch the heroes.
The original StackBlitz is https://stackblitz.com/angular/yoerxnmrbod
If you go to the heroes tab, click on a hero, and change his name, the change is reflected in the list.
I changed how the data is backed to be the angular in memory database.
https://stackblitz.com/edit/angular-ke7pxn-vxp9hi?file=src/app/app.module.ts
If you follow the same workflow as the above, the name change in the details component isn't reflected in the list. What am I missing to get the same functionality?
It seems that the reason is when you set HEROES as const in hero.service and then pass a separate hero and change his name, the name is changed in your HEROES array element (because it's an array of objects, and even if it is const, it's elements and their properties can be changed). And in the second realization, you always get a new instance of heroes array. If you want to save some changes to it, you should store it in your service and use like a simple array (without async pipe) and not receive it from your mock-backend each time.
Related
I got an array of objects, in similar structure to this:
arr = [ { key1: 'test', key2: 'text' } ]
This array and the object keys and values in it my be change,
then possibly go back to original with user interactions on the page.
I got an unsaved changes feature to develop, where when I leave the component I wanna see if there were any changes (including deeply nested ones) in this array.
Is there a way to detect this change in angular?
I suppose you could use a service to store the original values. You could compare the current value to the original to see if there is a difference, and be able to reset it like you wanted.
when I leave the component I wanna see if there were any changes (including deeply nested ones)
The "when I leave" part suggests using the ngOnDestroy hook. Now, dependent on your use case, you can emit the current value to component's output, or feed it to a shared service (you didn't share much about your application's architecture).
I am building the clone of a website/app called Kualitee.com. It is a test-management tool used by QA Engineers.
In kualitee, you have multiple projects, with test cases and members. You can add, delete, and change projects and members. There is a header on top which enables you to select a project of which you want the data of i.e test cases and stuff.
the header for changing projects
The approach I used for this is as follow:
1. one service containing all the data
2. one service containing only the project selected...
The whole app uses the data found in the second service. When I make a change in a project, say add a new member, it does display that at that time. After that, if I change the project in the select at the top to another project, the component containing that member does not change, even though the project is a different one now, but as soon as I switch to another component, through routing, and back again, the changes are there.
My point is, is there any way I can add functionality where, if a parent component changes an object in service, the change reflects in a child component also using that same object in that same service, without me needing to change components or refresh.
PS. This is my first time asking something on StackOverflow, Sorry if my question is confusing.
You probably need an observable shared service to share the data between components. Here is how to achieve that: Interaction between components using a service
I think you are referred to Angular life cycle https://angular.io/guide/lifecycle-hooks
I am new to react and I'd like to ask a high-level question. Any directional advice will be welcome.
So, here is what I did in vanilla JS. I defined an empty variable first, and put the results of a DB query there. Then created buttons I did filter operations to only populate the items that satisfied the filter criteria. So, to illustrate, it looks like this:
const things = [
{continent: Asia, country: Korea},
{continent: Europe, country: France},
{continent: Africa, country: Egypt},
.....
];
const filter (continent) = > {
//Logic to filter based on continent criteria and return the countries
};
This was possible in vanilla JS, because I could set aside the array variable in the script document and the functions would easily reference it.
The question is: how do I do something similar in react? i.e. what would be an equivalent way to store a variable that lasts as long as the page is active, so that I can do filter operations on them? Obviously, setting aside a variable outside of the component doesn't work after the page is rendered. Where should I look to resolve this?
Any advice will be appreciated. Thanks!
For this you can either do one of three things
Pass an array defined at the top level between children and
parents (can work for simple pages)
Use the React Context Api
https://reactjs.org/docs/context.html
Look into a state management library like Redux (most recommended if your application is complex) -
https://redux.js.org/introduction/getting-started/
If I understand correctly, you want to write data on a page server-side, and then load it into a React component client-side. I would try writing the data into a hidden element, probably in csv format, with an "id". Then, when your App component loads, use document.getElementById to retrieve the data. Pass that into your component tree, and filter away.
Sorry, I'm not able to test this out at the moment. There may be some gotchas with this approach, but if you don't want to fetch the data client-side, hopefully something like this will work.
I have one observable array in my store that is deeply nested. Lets called the property people (which contains elements of class Person). Now the Person class has a property products which is an array of Product, a class which also has nesting through ShippingInformation and so on. When the app is loaded I get the people array with all nested data. Now upon any data update I receive the updated peoples array again from the server. A lot of the times the elements in the people array are the same, the only change being some ShippingInformation.
Now how should I update the existing observable array people? I do not want to reassign it because often times the direct Person elements are the same. It is only some nested information on one Person that has changed. Is there a way that I can sync the two arrays without changing the ref on the array with a reassign so that I avoid major rerenders in react? Can mobx help me here or are there any other lib I can use to help me update without triggering unnecessary rerenders? If not, are these rerenders that bad, performance wise, I guess react must go through the diffing process at least
tl;dr: Why not pass variables by reference between components to have them work on the same data instead of using e.g. BehaviorSubjects?
I'm writing a sort of diary application in Angular 8. I have two components (Navbar and Dashboard) and a service (EntryService).
Navbar lists the entries, Dashboard provides the textarea, EntryService glues them together and communicates with the database.
While debugging the application I stumbled upon a way to communicate between the service and a component that i haven't thought of before.
By accident I passed a variable (entry: Entry) from the Dashboard by reference to the EntryService. The service saved to the database getting a unique ID back and saving this ID into the entry variable. This change immediately reflected to the Dashboard because of the 'passing by reference'.
Until now I was using Subjects to update the components on changes, but passing references around seems to be much simpler, because I want to work on the same data on both components and the service.
I've studied Angular for a while now and not read about this approach, so I'm wondering if it is a bad idea or design and if yes why?
Thanks for your answers!
Passing by reference can be handy. But as a general approach to keep the application components in sync it has some draw backs. With Subjects you can easily investigate in which places of the application the value of the Subject will be changed by checking where the Subject.next() function is being called. When you pass your object by reference to a hundred components/services it will be much more difficult to find out, which of them modify the object and more importantly when, becaue often you want to trigger other changes afterwards. When you subscribe to Subjects, you get notifications about changes and can react to them. Subjects and Subscribers are an example for an Observer/Observable pattern, it allows you to decouple your application logic. And they are much more flexible, for example you can have a Subject which can return the last x number of changes or you can debounce the changes when you track user input, you can apply filters to them etc.