Ngrx Store Tutorial for Angular - Learn State Management for Angular
Why Stack Overflow recommends it
Stack Overflow users link it when answering Angular questions about sharing data between components and point to Ngrx as the fix, using this video as a beginner-friendly walkthrough.
Recommended by 5 people across 5 different months, 2018 to 2023.
What it is
A 28-minute tutorial by Gary Simon of DesignCourse that introduces Ngrx Store, the Redux-style state management library for Angular. It walks through the core ideas of store, actions and reducers by building a small example app, with a written version of the lesson also available.
What people said
Strong rec Compiler v2 · 2020-04 · Stack Overflow · on “Pass Data from One Component to Another Angular 2”
I would use Ngrx store for this as it is the official way of getting data between components. Ngrx store is like a session that you can access across various components and that is its purpose. Here is a great tutorial by Gary Simon on YouTube: [this video] Here is the written version of the video: [LINK]
Recommends Gordon Westerman · 2018-10 · Stack Overflow · on “Angular 5 - change variable from another Component”
There are other options besides chaining @Input and @Output parameters through multiple components or using a service (which is likely the best solution if you are new to Angular), one of which is making use of shared state. Using a state management framework such ngrx [LINK] , ngxs [LINK] or akita [LINK] allows you to share both state and changes to that state between components - in this case arrays and changes to their content. Once set up the store would manage adding the items selected in your child component to the array referenced in the parent component. The two components would not even have to be related to each other. These two tutorials for ngrx [this video] and ngxs [LINK] both cover
Recommends SebastianG · 2019-03 · Stack Overflow · on “Angular TypeScript How to see specific value of dynamically generated children in parent component”
You've got two options in my opinion: Using Input/Output properties and have your child component Emit an event to which you react in the parent component, here's some documentation on that [LINK] Implement REDUX in your application if you feel like it'll grow to a point where using input/output properties will become too hard to maintain and keep track off, here's some good documentation on that. [this video] I personally prefer using REDUX for most applications although I can see it not being worth the hassle for a small project.
Recommends Florian Ludewig · 2019-04 · Stack Overflow · on “Angular 4 : Best practise in angular if page have multiple tabs”
In your case, I would personally make use of the Redux architecture. It basically acts as a "database" for your frontend. You may take a look at an library called ngrx . Here are some tutorials I would look into: [this video] [LINK] [LINK]
Recommends priyamtheone · 2023-02 · Stack Overflow · on “Problem installing @angular-redux/store in Angular application”
@angular-redux/store hasn't been updated in years and doesn't specify that it supports the latest Angular 15 version, which NPM considers as an error. This can be ignored using npm install --legacy-peer-deps , but Angular's official library support only includes libraries that are built no longer than 2 majors ago (so Angular 15 requires libraries that have been built using Angular 13+). Hence, I opted to go with NgRx. I managed to install NgRx and learn the fundamentals of how to use it from this [this video] tutorial. Now my basic concepts of State, Action, Reducer and Store are clear.