About angular api call and component communication
up vote
0
down vote
favorite
I have a component product.component.ts in which i have all data of multiple product which i got by api call
@Component({
selector: 'app-pinfo',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
then after displaying all porduct on this component when i click the single product ,I navigate to detailedproductinfo component and i pass product id as navigation parameter i am intrested in know that what i do for detailed data about product from following
Api call to getproductinfobyid(id) or
pass data from product component because i have already product related data in product component
I am intrested in know that which method will enhance performance from above and what take time more in angular from below
passing data between component by using service or
api call by using http
angular angular-components angular-router angular-httpclient
edited Nov 20 at 9:46
sloth
72.6k14127168
asked Nov 20 at 9:43
N K
325
add a comment |
up vote
0
down vote
favorite
I have a component product.component.ts in which i have all data of multiple product which i got by api call
@Component({
selector: 'app-pinfo',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
then after displaying all porduct on this component when i click the single product ,I navigate to detailedproductinfo component and i pass product id as navigation parameter i am intrested in know that what i do for detailed data about product from following
Api call to getproductinfobyid(id) or
pass data from product component because i have already product related data in product component
I am intrested in know that which method will enhance performance from above and what take time more in angular from below
passing data between component by using service or
api call by using http
angular angular-components angular-router angular-httpclient
edited Nov 20 at 9:46
sloth
72.6k14127168
asked Nov 20 at 9:43
N K
325
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in yourproductcomponent. At the time you want to display a specific product use yougetproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.
– kedenk
Nov 20 at 9:51
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a component product.component.ts in which i have all data of multiple product which i got by api call
@Component({
selector: 'app-pinfo',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
then after displaying all porduct on this component when i click the single product ,I navigate to detailedproductinfo component and i pass product id as navigation parameter i am intrested in know that what i do for detailed data about product from following
Api call to getproductinfobyid(id) or
pass data from product component because i have already product related data in product component
I am intrested in know that which method will enhance performance from above and what take time more in angular from below
passing data between component by using service or
api call by using http
angular angular-components angular-router angular-httpclient
edited Nov 20 at 9:46
sloth
72.6k14127168
asked Nov 20 at 9:43
N K
325
I have a component product.component.ts in which i have all data of multiple product which i got by api call
@Component({
selector: 'app-pinfo',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
then after displaying all porduct on this component when i click the single product ,I navigate to detailedproductinfo component and i pass product id as navigation parameter i am intrested in know that what i do for detailed data about product from following
Api call to getproductinfobyid(id) or
pass data from product component because i have already product related data in product component
I am intrested in know that which method will enhance performance from above and what take time more in angular from below
passing data between component by using service or
api call by using http
angular angular-components angular-router angular-httpclient
angular angular-components angular-router angular-httpclient
edited Nov 20 at 9:46
sloth
72.6k14127168
asked Nov 20 at 9:43
N K
325
edited Nov 20 at 9:46
sloth
72.6k14127168
asked Nov 20 at 9:43
N K
325
edited Nov 20 at 9:46
sloth
72.6k14127168
edited Nov 20 at 9:46
sloth
72.6k14127168
edited Nov 20 at 9:46
sloth
72.6k14127168
72.6k14127168
asked Nov 20 at 9:43
N K
325
asked Nov 20 at 9:43
N K
325
asked Nov 20 at 9:43
N K
325
325
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in yourproductcomponent. At the time you want to display a specific product use yougetproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.
– kedenk
Nov 20 at 9:51
add a comment |
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in yourproductcomponent. At the time you want to display a specific product use yougetproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.
– kedenk
Nov 20 at 9:51
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in your
product component. At the time you want to display a specific product use you getproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.– kedenk
Nov 20 at 9:51
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in your
product component. At the time you want to display a specific product use you getproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.– kedenk
Nov 20 at 9:51
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
Although there are multiple ways of dealing with this, it completely depends on these things:
- Whether the Products API return the complete details for each product. Or whether they just return the relevant details based on what you'd like to show on the Product List Page.
- Whether the Products API is in your control and you decide what data it is supposed to return.
- The number of fields that the data model for each product has.
Keeping all this in mind, if the number of fields is quite a lot for each product, then I don't think it's appropriate to return the details of all the products via the products API. The specific details for each product should be returned by products/:id API which would take ProductId as a param.
So in this case, getting the Id from the ActivatedRoute and then calling /products/:id API to get the Product Details would make more sense.
If on the other hand, the data model for a product is not that big, it's totally fine to return the complete details of the products via the products API.
So in this case, passing the selected product data via a SharedService would be the approach to go for.
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
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',
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%2f53390143%2fabout-angular-api-call-and-component-communication%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
up vote
1
down vote
Although there are multiple ways of dealing with this, it completely depends on these things:
- Whether the Products API return the complete details for each product. Or whether they just return the relevant details based on what you'd like to show on the Product List Page.
- Whether the Products API is in your control and you decide what data it is supposed to return.
- The number of fields that the data model for each product has.
Keeping all this in mind, if the number of fields is quite a lot for each product, then I don't think it's appropriate to return the details of all the products via the products API. The specific details for each product should be returned by products/:id API which would take ProductId as a param.
So in this case, getting the Id from the ActivatedRoute and then calling /products/:id API to get the Product Details would make more sense.
If on the other hand, the data model for a product is not that big, it's totally fine to return the complete details of the products via the products API.
So in this case, passing the selected product data via a SharedService would be the approach to go for.
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
add a comment |
up vote
1
down vote
Although there are multiple ways of dealing with this, it completely depends on these things:
- Whether the Products API return the complete details for each product. Or whether they just return the relevant details based on what you'd like to show on the Product List Page.
- Whether the Products API is in your control and you decide what data it is supposed to return.
- The number of fields that the data model for each product has.
Keeping all this in mind, if the number of fields is quite a lot for each product, then I don't think it's appropriate to return the details of all the products via the products API. The specific details for each product should be returned by products/:id API which would take ProductId as a param.
So in this case, getting the Id from the ActivatedRoute and then calling /products/:id API to get the Product Details would make more sense.
If on the other hand, the data model for a product is not that big, it's totally fine to return the complete details of the products via the products API.
So in this case, passing the selected product data via a SharedService would be the approach to go for.
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
add a comment |
up vote
1
down vote
up vote
1
down vote
Although there are multiple ways of dealing with this, it completely depends on these things:
- Whether the Products API return the complete details for each product. Or whether they just return the relevant details based on what you'd like to show on the Product List Page.
- Whether the Products API is in your control and you decide what data it is supposed to return.
- The number of fields that the data model for each product has.
Keeping all this in mind, if the number of fields is quite a lot for each product, then I don't think it's appropriate to return the details of all the products via the products API. The specific details for each product should be returned by products/:id API which would take ProductId as a param.
So in this case, getting the Id from the ActivatedRoute and then calling /products/:id API to get the Product Details would make more sense.
If on the other hand, the data model for a product is not that big, it's totally fine to return the complete details of the products via the products API.
So in this case, passing the selected product data via a SharedService would be the approach to go for.
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
Although there are multiple ways of dealing with this, it completely depends on these things:
- Whether the Products API return the complete details for each product. Or whether they just return the relevant details based on what you'd like to show on the Product List Page.
- Whether the Products API is in your control and you decide what data it is supposed to return.
- The number of fields that the data model for each product has.
Keeping all this in mind, if the number of fields is quite a lot for each product, then I don't think it's appropriate to return the details of all the products via the products API. The specific details for each product should be returned by products/:id API which would take ProductId as a param.
So in this case, getting the Id from the ActivatedRoute and then calling /products/:id API to get the Product Details would make more sense.
If on the other hand, the data model for a product is not that big, it's totally fine to return the complete details of the products via the products API.
So in this case, passing the selected product data via a SharedService would be the approach to go for.
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
answered Nov 20 at 9:53
SiddAjmera
12.1k21137
12.1k21137
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.
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%2f53390143%2fabout-angular-api-call-and-component-communication%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
for sure, use shared service or @input annotation for data you want to pass to child component
– Vinko Vorih
Nov 20 at 9:46
If you already have all the data you need in memory it's obviously faster to just pass it to another component than reloading it again from an external source.
– sloth
Nov 20 at 9:48
i am not using detailedproductinfo as child component it is completely independent component @VinkoVorih
– N K
Nov 20 at 9:48
As earlier mentioned, if you have the data already, just pass it to the component. However, you can speed up everything further if you download only a list of product names and ids in your
productcomponent. At the time you want to display a specific product use yougetproductinfobyid. However, this depends on the size of the product entity and the number of products. You do not have to download all products with all information if not necessary.– kedenk
Nov 20 at 9:51