Persisting the view state in an angular application
I have a view where I have few text inputs.The visibility of the inputs can be controlled by the user. When the user navigates across the application & returns back to the same page the state of the view should be as he had left the page (for that user session).
for ex: If there are 5 text inputs on the page (page two), user selects to hide 3 of them. Then he navigates to page one, when he returns back to page two he should see only two inputs(as he had chosen to hide the other three).
While doing my research I came across angular state management using ngrx/store, which seems to help in this cause, but the approach needed to be taken the angular way I am unaware of as I have no prior experience working with angular store/ state management in particular.
Please see the link for a small demo scale representation of the app being developed.
Thank you already!
angular angular5 ngrx-store state-management angular-state-managmement
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
add a comment |
I have a view where I have few text inputs.The visibility of the inputs can be controlled by the user. When the user navigates across the application & returns back to the same page the state of the view should be as he had left the page (for that user session).
for ex: If there are 5 text inputs on the page (page two), user selects to hide 3 of them. Then he navigates to page one, when he returns back to page two he should see only two inputs(as he had chosen to hide the other three).
While doing my research I came across angular state management using ngrx/store, which seems to help in this cause, but the approach needed to be taken the angular way I am unaware of as I have no prior experience working with angular store/ state management in particular.
Please see the link for a small demo scale representation of the app being developed.
Thank you already!
angular angular5 ngrx-store state-management angular-state-managmement
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
add a comment |
I have a view where I have few text inputs.The visibility of the inputs can be controlled by the user. When the user navigates across the application & returns back to the same page the state of the view should be as he had left the page (for that user session).
for ex: If there are 5 text inputs on the page (page two), user selects to hide 3 of them. Then he navigates to page one, when he returns back to page two he should see only two inputs(as he had chosen to hide the other three).
While doing my research I came across angular state management using ngrx/store, which seems to help in this cause, but the approach needed to be taken the angular way I am unaware of as I have no prior experience working with angular store/ state management in particular.
Please see the link for a small demo scale representation of the app being developed.
Thank you already!
angular angular5 ngrx-store state-management angular-state-managmement
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
I have a view where I have few text inputs.The visibility of the inputs can be controlled by the user. When the user navigates across the application & returns back to the same page the state of the view should be as he had left the page (for that user session).
for ex: If there are 5 text inputs on the page (page two), user selects to hide 3 of them. Then he navigates to page one, when he returns back to page two he should see only two inputs(as he had chosen to hide the other three).
While doing my research I came across angular state management using ngrx/store, which seems to help in this cause, but the approach needed to be taken the angular way I am unaware of as I have no prior experience working with angular store/ state management in particular.
Please see the link for a small demo scale representation of the app being developed.
Thank you already!
angular angular5 ngrx-store state-management angular-state-managmement
angular angular5 ngrx-store state-management angular-state-managmement
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
asked Nov 23 '18 at 5:34
Krishna PrabhuGaonkar
276
276
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage
Then with a (if) check if you have a status. If you have a state do the binding with the view.
Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data
The disadvantage of this is that if you reload the page you lose the
status.
Note: Remember that angular has built-in directive that help you hide elements ngIf
answered Nov 23 '18 at 6:38
GonzaH
1417
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441120%2fpersisting-the-view-state-in-an-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage
Then with a (if) check if you have a status. If you have a state do the binding with the view.
Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data
The disadvantage of this is that if you reload the page you lose the
status.
Note: Remember that angular has built-in directive that help you hide elements ngIf
answered Nov 23 '18 at 6:38
GonzaH
1417
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
add a comment |
An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage
Then with a (if) check if you have a status. If you have a state do the binding with the view.
Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data
The disadvantage of this is that if you reload the page you lose the
status.
Note: Remember that angular has built-in directive that help you hide elements ngIf
answered Nov 23 '18 at 6:38
GonzaH
1417
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
add a comment |
An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage
Then with a (if) check if you have a status. If you have a state do the binding with the view.
Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data
The disadvantage of this is that if you reload the page you lose the
status.
Note: Remember that angular has built-in directive that help you hide elements ngIf
answered Nov 23 '18 at 6:38
GonzaH
1417
An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage
Then with a (if) check if you have a status. If you have a state do the binding with the view.
Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data
The disadvantage of this is that if you reload the page you lose the
status.
Note: Remember that angular has built-in directive that help you hide elements ngIf
answered Nov 23 '18 at 6:38
GonzaH
1417
answered Nov 23 '18 at 6:38
GonzaH
1417
answered Nov 23 '18 at 6:38
GonzaH
1417
answered Nov 23 '18 at 6:38
GonzaH
1417
1417
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
add a comment |
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
hi thanks for the reply, your suggestions seem reasonable but from I have understood is using @ngrx/store & store management is the proper angular approach. Also if I have understood correctly what you are suggesting, you are suggesting way to sahre data, but what I want is to persist the view state. Basically the DOM structure should persists as it was before, after the user navigates across the app.
– Krishna PrabhuGaonkar
Nov 23 '18 at 7:11
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
@ngrx/store is based on the redux.js.org pattern. From my point of view it would be a lot of architecture for what you want to do Useful resource: youtube.com/watch?v=okdC5gcD-dM
– GonzaH
Nov 23 '18 at 16:40
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
ok that makes sense. thanks @GonzaH
– Krishna PrabhuGaonkar
Nov 23 '18 at 17:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441120%2fpersisting-the-view-state-in-an-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
