1

I would like to crate a 'login component' that display some kind of popup modal. Consider I've many places all over my app that can call this modal,What is a batter approach: 1. To place the 'login component' everywhere I use it although its the same everywhere. 2. Place it in top level component and show and hide it with some kind of event listener.

In the first way I encapsulate the component to display what it needs and have an easy control of its life cycle. In the second way I avoid repeating my self and call it every components.

Thanks.

Improve this question

2 Answers 2

Reset to default
1

The better way is to place it somewhere once and use a shared service with observables to allow all interested components to send messages.

See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the link. I've read it but it shows only situation when the calling components is the parent of the new components.. I need that the login component will be without connection to the calling component...
If you use the service then it doesn't matter what component is parent and what is child, the participating components can be anywhere in your application. The only thing that matters is that the shared service is provided at a common parent or ancestor of the participating components, otherwise they can't inject the same service instance.
Can you share an example of calling remote component with service?
The link above should contain an example. You need a service with an observable. The remote component injects that service and subscribes to the observable and executes some action in the callback passed to subscribe(...). Another component or service also injects that service and emits values using the observable. Ensure you provide the service only once otherwise there will be more than one service instance.
Ill try it.. Thanks a lot
1

You don't need to do any of this. Just create a single login component and redirect to it whenever you need to. Do not repeat yourself. Have some way of validating user's login status. Then whenever login status goes invalid, just redirect to the login page with appropriate messages

Improve this answer

1 Comment

How can I redirect the component?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.