What is the difference between using the service variable change in a component versus subscribing to an...
I have three components. recipe, recipe-item and recipe-details. On clicking on a recipe from recipe-item component, recipe details of that particular recipe is displayed (i.e recipe-details component is getting activated).
I have one common service - recipe-service. Which I am thinking to use it for communicating between all the components.
Approach 1: When I click on a recipe from recipe-item, I will call a function which will point to another function in recipe service which in turn will mark a variable currentRecipe as the clicked recipe passed from recipe-item. This currentRecipe value I will access in the recipe/recipe-details components through ngOnInit to display the details. Will this approach work? will the view change as the variable changes in the service? I am doubtful of this approach as the ngOnInit only checks while initiating the component.
Approach 2: When I click on a recipe from recipe-item, I will call a function which will trigger an event emitter that was declared in the service, but emits currentRecipe directly from the recipe-item component. And, I will subscribe to this event from the ngOnInit of recipe and recipe-detail components to display the details.
I am a beginner and I am confused between the two approaches. I tried the first approach which did not work. The second approach works. I am not sure why the first approach did not work. In which scenario I should be using the first approach and in which scenario I should be using the second approach?
Thank you for the help!
javascript angular angular2-services angular7
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
add a comment |
I have three components. recipe, recipe-item and recipe-details. On clicking on a recipe from recipe-item component, recipe details of that particular recipe is displayed (i.e recipe-details component is getting activated).
I have one common service - recipe-service. Which I am thinking to use it for communicating between all the components.
Approach 1: When I click on a recipe from recipe-item, I will call a function which will point to another function in recipe service which in turn will mark a variable currentRecipe as the clicked recipe passed from recipe-item. This currentRecipe value I will access in the recipe/recipe-details components through ngOnInit to display the details. Will this approach work? will the view change as the variable changes in the service? I am doubtful of this approach as the ngOnInit only checks while initiating the component.
Approach 2: When I click on a recipe from recipe-item, I will call a function which will trigger an event emitter that was declared in the service, but emits currentRecipe directly from the recipe-item component. And, I will subscribe to this event from the ngOnInit of recipe and recipe-detail components to display the details.
I am a beginner and I am confused between the two approaches. I tried the first approach which did not work. The second approach works. I am not sure why the first approach did not work. In which scenario I should be using the first approach and in which scenario I should be using the second approach?
Thank you for the help!
javascript angular angular2-services angular7
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16
add a comment |
I have three components. recipe, recipe-item and recipe-details. On clicking on a recipe from recipe-item component, recipe details of that particular recipe is displayed (i.e recipe-details component is getting activated).
I have one common service - recipe-service. Which I am thinking to use it for communicating between all the components.
Approach 1: When I click on a recipe from recipe-item, I will call a function which will point to another function in recipe service which in turn will mark a variable currentRecipe as the clicked recipe passed from recipe-item. This currentRecipe value I will access in the recipe/recipe-details components through ngOnInit to display the details. Will this approach work? will the view change as the variable changes in the service? I am doubtful of this approach as the ngOnInit only checks while initiating the component.
Approach 2: When I click on a recipe from recipe-item, I will call a function which will trigger an event emitter that was declared in the service, but emits currentRecipe directly from the recipe-item component. And, I will subscribe to this event from the ngOnInit of recipe and recipe-detail components to display the details.
I am a beginner and I am confused between the two approaches. I tried the first approach which did not work. The second approach works. I am not sure why the first approach did not work. In which scenario I should be using the first approach and in which scenario I should be using the second approach?
Thank you for the help!
javascript angular angular2-services angular7
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
I have three components. recipe, recipe-item and recipe-details. On clicking on a recipe from recipe-item component, recipe details of that particular recipe is displayed (i.e recipe-details component is getting activated).
I have one common service - recipe-service. Which I am thinking to use it for communicating between all the components.
Approach 1: When I click on a recipe from recipe-item, I will call a function which will point to another function in recipe service which in turn will mark a variable currentRecipe as the clicked recipe passed from recipe-item. This currentRecipe value I will access in the recipe/recipe-details components through ngOnInit to display the details. Will this approach work? will the view change as the variable changes in the service? I am doubtful of this approach as the ngOnInit only checks while initiating the component.
Approach 2: When I click on a recipe from recipe-item, I will call a function which will trigger an event emitter that was declared in the service, but emits currentRecipe directly from the recipe-item component. And, I will subscribe to this event from the ngOnInit of recipe and recipe-detail components to display the details.
I am a beginner and I am confused between the two approaches. I tried the first approach which did not work. The second approach works. I am not sure why the first approach did not work. In which scenario I should be using the first approach and in which scenario I should be using the second approach?
Thank you for the help!
javascript angular angular2-services angular7
javascript angular angular2-services angular7
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
edited Nov 15 '18 at 2:39
Sudharsan Prabu
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
asked Nov 15 '18 at 2:30
Sudharsan PrabuSudharsan Prabu
155
155
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16
add a comment |
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16
add a comment |
1 Answer
1
active
oldest
votes
Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.
You could use the @input() event emitter to transfer the details to the child component.
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
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%2f53311586%2fwhat-is-the-difference-between-using-the-service-variable-change-in-a-component%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
Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.
You could use the @input() event emitter to transfer the details to the child component.
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
add a comment |
Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.
You could use the @input() event emitter to transfer the details to the child component.
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
add a comment |
Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.
You could use the @input() event emitter to transfer the details to the child component.
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
Both approaches will work, i would suggest you go with the 2nd Approach as both of your component are dependent and have a relationship.
You could use the @input() event emitter to transfer the details to the child component.
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
answered Nov 15 '18 at 2:35
SajeetharanSajeetharan
123k30175235
123k30175235
add a comment |
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.
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%2f53311586%2fwhat-is-the-difference-between-using-the-service-variable-change-in-a-component%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
Approach 2 is may be work, But It is very bad practice to use, EventEmitter is an angular abstraction and its only purpose is to emit events in components.
– Soumya Gangamwar
Nov 15 '18 at 5:16