Communication between re usable components using services

I have created two generic components called 1)list and 2)details so that i can re use them:

The components looks like this:

enter image description here

Now i am re using the these component in another components called SCHOOL and COLLEGE which will displayed like this:

enter image description here

Now

If i click on the list-item(for ex school 1) from the list component present in SCHOOL component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

If i click on the list-item(for ex college 1) from the list component present in COLLEGE component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

I got solution by this question . In this example communication is happening between the components using services. But in my condition i am re using the component. How can i use the services when i am re using the component.

Stackblitz DEMO

asked Nov 13 '18 at 9:24

Empty_Soul

19311

You need to use evenEmitter to figure it out which item is being clicked and thn accordingly display information. PS: Use @output

– Pardeep Jain
Nov 13 '18 at 9:40

Can you include the service in the Stackblitz demo?

– Rutger van Dijk
Nov 13 '18 at 9:43

okay, i will update the DEMO.

– Empty_Soul
Nov 13 '18 at 9:44

I have created services inside COLLEGE component. Here is the updated stackblitz link : https://stackblitz.com/edit/list-examples-mine-ny9ddc?file=app/details/details.component.ts

– Empty_Soul
Nov 13 '18 at 9:55

add a comment |

I have created two generic components called 1)list and 2)details so that i can re use them:

The components looks like this:

enter image description here

Now i am re using the these component in another components called SCHOOL and COLLEGE which will displayed like this:

enter image description here

Now

If i click on the list-item(for ex school 1) from the list component present in SCHOOL component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

If i click on the list-item(for ex college 1) from the list component present in COLLEGE component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

Stackblitz DEMO

asked Nov 13 '18 at 9:24

Empty_Soul

19311

You need to use evenEmitter to figure it out which item is being clicked and thn accordingly display information. PS: Use @output

– Pardeep Jain
Nov 13 '18 at 9:40

Can you include the service in the Stackblitz demo?

– Rutger van Dijk
Nov 13 '18 at 9:43

okay, i will update the DEMO.

– Empty_Soul
Nov 13 '18 at 9:44

I have created services inside COLLEGE component. Here is the updated stackblitz link : https://stackblitz.com/edit/list-examples-mine-ny9ddc?file=app/details/details.component.ts

– Empty_Soul
Nov 13 '18 at 9:55

add a comment |

I have created two generic components called 1)list and 2)details so that i can re use them:

The components looks like this:

enter image description here

Now i am re using the these component in another components called SCHOOL and COLLEGE which will displayed like this:

enter image description here

Now

If i click on the list-item(for ex school 1) from the list component present in SCHOOL component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

If i click on the list-item(for ex college 1) from the list component present in COLLEGE component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

Stackblitz DEMO

asked Nov 13 '18 at 9:24

Empty_Soul

19311

I have created two generic components called 1)list and 2)details so that i can re use them:

The components looks like this:

enter image description here

Now i am re using the these component in another components called SCHOOL and COLLEGE which will displayed like this:

enter image description here

Now

If i click on the list-item(for ex school 1) from the list component present in SCHOOL component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

If i click on the list-item(for ex college 1) from the list component present in COLLEGE component. I want to display that particular clicked item details(Ex: Name,email) on right side (i,e on details page/component).

Stackblitz DEMO

angular typescript angular6 angular-services

asked Nov 13 '18 at 9:24

Empty_Soul

19311

asked Nov 13 '18 at 9:24

Empty_Soul

19311

asked Nov 13 '18 at 9:24

Empty_Soul

19311

asked Nov 13 '18 at 9:24

Empty_Soul

19311

asked Nov 13 '18 at 9:24

Empty_Soul

19311

You need to use evenEmitter to figure it out which item is being clicked and thn accordingly display information. PS: Use @output

– Pardeep Jain
Nov 13 '18 at 9:40

Can you include the service in the Stackblitz demo?

– Rutger van Dijk
Nov 13 '18 at 9:43

okay, i will update the DEMO.

– Empty_Soul
Nov 13 '18 at 9:44

I have created services inside COLLEGE component. Here is the updated stackblitz link : https://stackblitz.com/edit/list-examples-mine-ny9ddc?file=app/details/details.component.ts

– Empty_Soul
Nov 13 '18 at 9:55

add a comment |

You need to use evenEmitter to figure it out which item is being clicked and thn accordingly display information. PS: Use @output

– Pardeep Jain
Nov 13 '18 at 9:40

Can you include the service in the Stackblitz demo?

– Rutger van Dijk
Nov 13 '18 at 9:43

okay, i will update the DEMO.

– Empty_Soul
Nov 13 '18 at 9:44

I have created services inside COLLEGE component. Here is the updated stackblitz link : https://stackblitz.com/edit/list-examples-mine-ny9ddc?file=app/details/details.component.ts

– Empty_Soul
Nov 13 '18 at 9:55

You need to use evenEmitter to figure it out which item is being clicked and thn accordingly display information. PS: Use @output

– Pardeep Jain
Nov 13 '18 at 9:40

Can you include the service in the Stackblitz demo?

– Rutger van Dijk
Nov 13 '18 at 9:43

okay, i will update the DEMO.

– Empty_Soul
Nov 13 '18 at 9:44

I have created services inside COLLEGE component. Here is the updated stackblitz link : https://stackblitz.com/edit/list-examples-mine-ny9ddc?file=app/details/details.component.ts

– Empty_Soul
Nov 13 '18 at 9:55

add a comment |

2 Answers
2

active

oldest

votes

In your current scenario, the best would be to leverage @Input and @Output decorators.

You need to have @Input for details component which can get the contact details from its component

@Component({

  selector: 'app-details',

  templateUrl: './details.component.html',

  styleUrls: ['./details.component.css']

})

export class DetailsComponent {



  @Input()

  public contact;



}

List component will emit the value on selection of any items from the list.

export class ListComponent {



  @Output()

  public select;



  public onSelect(contact){

     this.select.emit(contact);

  }



}

School and College component can get the the emitted value from the List Component and pass it to details component .

<div class="header">

   <h3>SCHOOL</h3>

  <div  class="left">

      <app-list  [contacts]="contacts" ></app-list>

  </div>

    <div  class="right">

      <app-details></app-details>  

    </div>

</div>

Here is the working copy - https://stackblitz.com/edit/list-examples-mine-ilxisk

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

add a comment |

You decided to create generic components. In this case its better to create one service which will be able to support some shared model (inheritance).

So, do not create separated services for school and college but one service ItemDetailsService.

This service should accept some abstract model (for e.g. ItemDetails). School and college models should then extend this abstract model.

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277689%2fcommunication-between-re-usable-components-using-services%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

In your current scenario, the best would be to leverage @Input and @Output decorators.

You need to have @Input for details component which can get the contact details from its component

@Component({

  selector: 'app-details',

  templateUrl: './details.component.html',

  styleUrls: ['./details.component.css']

})

export class DetailsComponent {



  @Input()

  public contact;



}

List component will emit the value on selection of any items from the list.

export class ListComponent {



  @Output()

  public select;



  public onSelect(contact){

     this.select.emit(contact);

  }



}

School and College component can get the the emitted value from the List Component and pass it to details component .

<div class="header">

   <h3>SCHOOL</h3>

  <div  class="left">

      <app-list  [contacts]="contacts" ></app-list>

  </div>

    <div  class="right">

      <app-details></app-details>  

    </div>

</div>

Here is the working copy - https://stackblitz.com/edit/list-examples-mine-ilxisk

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

add a comment |

In your current scenario, the best would be to leverage @Input and @Output decorators.

You need to have @Input for details component which can get the contact details from its component

@Component({

  selector: 'app-details',

  templateUrl: './details.component.html',

  styleUrls: ['./details.component.css']

})

export class DetailsComponent {



  @Input()

  public contact;



}

List component will emit the value on selection of any items from the list.

export class ListComponent {



  @Output()

  public select;



  public onSelect(contact){

     this.select.emit(contact);

  }



}

School and College component can get the the emitted value from the List Component and pass it to details component .

<div class="header">

   <h3>SCHOOL</h3>

  <div  class="left">

      <app-list  [contacts]="contacts" ></app-list>

  </div>

    <div  class="right">

      <app-details></app-details>  

    </div>

</div>

Here is the working copy - https://stackblitz.com/edit/list-examples-mine-ilxisk

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

add a comment |

In your current scenario, the best would be to leverage @Input and @Output decorators.

You need to have @Input for details component which can get the contact details from its component

@Component({

  selector: 'app-details',

  templateUrl: './details.component.html',

  styleUrls: ['./details.component.css']

})

export class DetailsComponent {



  @Input()

  public contact;



}

List component will emit the value on selection of any items from the list.

export class ListComponent {



  @Output()

  public select;



  public onSelect(contact){

     this.select.emit(contact);

  }



}

School and College component can get the the emitted value from the List Component and pass it to details component .

<div class="header">

   <h3>SCHOOL</h3>

  <div  class="left">

      <app-list  [contacts]="contacts" ></app-list>

  </div>

    <div  class="right">

      <app-details></app-details>  

    </div>

</div>

Here is the working copy - https://stackblitz.com/edit/list-examples-mine-ilxisk

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

In your current scenario, the best would be to leverage @Input and @Output decorators.

You need to have @Input for details component which can get the contact details from its component

@Component({

  selector: 'app-details',

  templateUrl: './details.component.html',

  styleUrls: ['./details.component.css']

})

export class DetailsComponent {



  @Input()

  public contact;



}

List component will emit the value on selection of any items from the list.

export class ListComponent {



  @Output()

  public select;



  public onSelect(contact){

     this.select.emit(contact);

  }



}

School and College component can get the the emitted value from the List Component and pass it to details component .

<div class="header">

   <h3>SCHOOL</h3>

  <div  class="left">

      <app-list  [contacts]="contacts" ></app-list>

  </div>

    <div  class="right">

      <app-details></app-details>  

    </div>

</div>

Here is the working copy - https://stackblitz.com/edit/list-examples-mine-ilxisk

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

answered Nov 13 '18 at 10:58

Sunil Singh

6,1672626

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

add a comment |

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

Thanks a lot....:)

– Empty_Soul
Nov 13 '18 at 11:02

I also recommend this solution

– Rutger van Dijk
Nov 13 '18 at 11:34

Answer is already provided for this. What else you are looking for ?

– Sunil Singh
Dec 7 '18 at 4:16

Please see the comment below the answer.

– Empty_Soul
Dec 7 '18 at 4:27

add a comment |

You decided to create generic components. In this case its better to create one service which will be able to support some shared model (inheritance).

So, do not create separated services for school and college but one service ItemDetailsService.

This service should accept some abstract model (for e.g. ItemDetails). School and college models should then extend this abstract model.

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

add a comment |

You decided to create generic components. In this case its better to create one service which will be able to support some shared model (inheritance).

So, do not create separated services for school and college but one service ItemDetailsService.

This service should accept some abstract model (for e.g. ItemDetails). School and college models should then extend this abstract model.

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

add a comment |

You decided to create generic components. In this case its better to create one service which will be able to support some shared model (inheritance).

So, do not create separated services for school and college but one service ItemDetailsService.

This service should accept some abstract model (for e.g. ItemDetails). School and college models should then extend this abstract model.

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

You decided to create generic components. In this case its better to create one service which will be able to support some shared model (inheritance).

So, do not create separated services for school and college but one service ItemDetailsService.

This service should accept some abstract model (for e.g. ItemDetails). School and college models should then extend this abstract model.

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

answered Nov 13 '18 at 10:00

Karol Trybulec

409111

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

add a comment |

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

Okay i will create one service for generic component, but how can i change the click function(i,e in list component) according to the components in which it is present.

– Empty_Soul
Nov 13 '18 at 10:02

Ahh, in this case things gets complicated if you want to use two generic lists on the same page. This shared service will be singleton. To make it work on the same page you have to get rid of singleton. You can for e.g define providers array at component level, this will create separated injector in Angular injectors tree. But it is still good, because service will be reusable and will support multiple generic components instances. @edit I mean you do not have to change click behavior. It have to be the same for every generic list. Just take care of ItemDetailsService instance.

– Karol Trybulec
Nov 13 '18 at 10:38

I dont want use them on same page, for the explanation i just made it as single page. Both SCHOOL and COLLEGE components are separate page/components.

– Empty_Soul
Nov 13 '18 at 10:41

In this case everything is easy. You do not have to worry about singleton. Click function is the same everywhere. Clicking at particular item on ListComponent pushing this item into ItemDetailsService. DetailsComponent receive this item from service via subscription. Click function is always the same, because model is always the same thanks to inheritance.

– Karol Trybulec
Nov 13 '18 at 10:59

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky