How not to destroy an Angular 2+ component?

Question

Angular

Hello. Let's imagine a short quiz where you have to answer let's say 5 questions. Let's say that the questions we have are large enough and each one takes up the entire screen.
You can do this: create one component to catch up on all the questions on one page and use state to show one or another. Pluses: one component, a single point of data collection (and you can return to the last question) and their subsequent processing. Cons: very large layout.
I would like to break the layout. To do this, you will have to create a separate component for each question and switch between them using q/1, q/2 ... q/5 routing.
You can again make a single data collection point through @@Output in the question components. But now it will not be possible to go back and see what was selected in the previous question.
Each question component stores the answer options and the selected option. When the user selects an answer, the choice is sent to the parent component and stored there. We move on to the next question, the component of the previous question is destroyed and all its data disappears.
How to make question components live?
This long example is not a task, I just wanted to convey to you the meaning of my question as closely as possible. There are solutions, you can at least make a service and store data in it, but the meaning is different.

Answer 1

Here is a useful article that clarifies a lot https://medium.com/@dan_abramov/smart-and-dumb-com...
The idea is that each question is in its own component and this component is "dumb". This means that the component itself does not store the user's response and does not know how to get it from the outside. It receives the previous user response via @@Input and returns the new user response via @@Output. The state itself is never stored in the question bean.
The entire list of questions is managed by an external component and the external component decides which question to display. The external component also collects and stores user responses from @@Output question components. And when going back to the previous question, it sends this answer to the @@Input of the question component so that it correctly displays the previous user's answer.
Angular also does not provide any means for state management and attempts to push the system state into a service variable (this is the first thing almost all angular developers come to) usually ends with unpredictable system behavior as it grows and the inability to reuse components. In general, this is a useful rule for any OOP framework, and not just for angular: do not allow the appearance of states in services if you want to reuse them someday. The good news is that you can learn to write in such a way that states in services never appear under any pretext. It will be decent code.
If you go back to Angular, with its complete inability to manage state out of the box, then I advise you to take a look at https://github.com/ngrx/platform.This is an editor for angular. At the moment I use it on several projects, the flight is normal. Not a silver bullet, of course, but many times better than nothing that Angular offers out of the box. If you are not familiar with redax, you will have to uglify first. But it pays off. Well, not understanding redax is somehow not comme il faut for a modern advanced programmer.