Changing the whole view in Angular 2

Question

In Angular 2, using the tags <nav>, <a> (with the attribute 'routerLink') and <router-outlet> I am able to dinamically show a component surrounded by the one I was into before (for example) activating the toggle to perform this operation.

My browser will also show a link responding to the path I declared in the Routes array inside the app module.

But how can I generate e.g. a button which will bring me in a totally different view (written in a different component) that will likely have nothing in common with the one it comes from?

Thank you.

That's what the router-outlet is for -- routing to a completely different view. Can you add your code? Sounds like you may have a misunderstanding about component architecture here — Kai
– Kai, Commented Aug 11, 2017 at 17:48
I think you currently lack some angular basics. I would strongly recommend you to at least check the tutorials in the angular.io page — Jota.Toledo
– Jota.Toledo, Commented Aug 11, 2017 at 17:59

DeborahK · Accepted Answer · 2017-08-11 18:17:36Z

2

The Angular router will do that for you. You just need to set up your routes and router outlets correctly.

Here is a picture of what I think you are asking about:

So your app component would have a router outlet and nothing else. You can then route to any component to take up the entire page.

You can then define a "main component" that has your header and footer and other elements you want to have appear on all of the other pages. That component also has a router outlet.

If you want a page to appear without any header or footer you route to the app component's router outlet.

If you want a page to appear with the header and footer, you route to the main component's router outlet.

edited Aug 11, 2017 at 18:17

answered Aug 11, 2017 at 17:50

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

1 Comment

DeborahK Over a year ago

As others have suggested, you may want to learn more about routing either in the tutorial at: angular.io or I have a Pluralsight course on routing here: app.pluralsight.com/library/courses/angular-routing/…

Collectives™ on Stack Overflow

Changing the whole view in Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related