How to NOT reload component Angular

Question

I have in app.component.html the layout for a side menu which englobes the real content of my app.

When I visit a link to get to a different page, I'd like that only the content of my app is reloaded, not the entire thing. For two reasons, one, the visual delay which makes the app seem slow, and two, it would be much easier for me to display the currently selected menu.

Abhijit Kar ツ · Accepted Answer · 2018-03-05 18:42:56Z

4

You have to use routing for this.

Basically, your app.component.html will contain these lines

<app-header></app-header>           // This will render the header component
<router-outlet></router-outlet>     // This will render all the route changes
<app-footer></app-footer>           // This will render the footer

Working Examples: Header and Footer don't reload, even the tabs selected are highlighted

My Portfolio
Angular Scaffolding // Take a look at this, you can even have a look at the code of how it works. Fork it all you want.

Reference

Angular Routing is a fairly large topic, deserving a whole page.

Take a look how it works: Angular.io Documentation

answered Mar 5, 2018 at 18:42

Abhijit Kar ツ

1,7601 gold badge14 silver badges26 bronze badges

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

2 Comments

Joao Ventura Over a year ago

Thanks that was what I needed! Now as a side effect I have some API calls that aren't being rendered but I'll figure it out ^^

Abhijit Kar ツ Over a year ago

@JoaoVentura That's the spirit, anyways we are here to help!

Collectives™ on Stack Overflow

How to NOT reload component Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related