How to use separate layout for login component in angular 2?

Question

I am new in angular. I create a login component , it works fine fine but issue is that I want a separate layout of login from whole app. What changes required for that?

Answer 1

In the "most" parent component you can .subscribe to the router.events data and once you hit the login component as active route, that component will be notified and add a css class or id for the different layout(theme) you want (perhaps that would be encapsulated in a partial scss file - if you don't use scss/sass perhaps you should consider it).

Once, you change route (other than login) the class will be gone and the "custom" (different) layout will not be applied anymore.

Hope that might help. You can always use a @Output/ @Input() or a shared singleton service with observables (for non parent-child components relationship) to share state between those components and do stuff based on state change. If you have any questions/comments feel free to add them. I think angular docs can help with the implementation details.