1

I wanted to find the answer to: In Angular routing when a link is clicked and the routing url generated, is the entire html page reloaded, or just a portion of the page?

Using the Angular basic tutorial, 'Tour of Heroes', I put a statement to draw a box in a different color (code from here and here), in every component's html template. For instance...

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<div style="width:100px;height:100px;border:1px solid rgb(255, 255, 0);">This is app component!</div>

<router-outlet></router-outlet>
<app-messages></app-messages>

But I cannot tell whether only the panel was redrawn and not the entire page.

screenshot

To test this, I thought of drawing the rectangle in a random color each time. The point of creating a random colored shape is to distinguish if the rectangles change color (entire page was reloaded) or whether only color of rectangle in component changes (then only component was reloaded).

Following the articles here and here

I created a src/custom.js file and in it put

(function random_rgba() {
    var o = Math.round, r = Math.random, s = 255;
   // return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
    document.write("<div style=\"width:100px;height:100px;border:1px solid " + " rgb(0, 255, 0);" + ">This is a hero detail component!</div>");
})()

and in angular.json,

    "scripts": [
      "src/custom.js"
    ]

But in hero-detail.component.html

<div><script>random_rgba();</script></div>

No colored rectangles are drawn when I reload the page. :(

likejudo
  • 3,396
  • 6
  • 52
  • 107

1 Answers1

1

The 'routerLink' property that you are using is a part of the Angular Router. The Angular Router is in charge of changing the URL and displaying components accordingly. It does NOT do an entire browser refresh when you use it.

Only the component that has a match in your routes array will be reloaded. All the components above / outside your Router Outlet keeps their local state and is not rebuilt by the routing.

You can also have multiple Router Outlets, and if so, only the part inside the relevant Router Outlet is reloaded.

If you are looking at it from the point of view of Change Detection, then Change Detection probable runs across your entire application, as it runs on every other event that happens. That can be avoided though, by using Change Detection strategy OnPush inside your components.

SnorreDan
  • 2,740
  • 1
  • 14
  • 17
  • It is not clear `const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'detail/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroesComponent } ];` If user clicks on an id, then do all the components inside this `Routes` array reload? or only the `HeroDetailComponent`. – likejudo Jan 31 '20 at 14:03
  • @likejudo Only the HeroDetailComponent will reload. I will try to rephrase my answer a bit. – SnorreDan Jan 31 '20 at 14:10
  • I am trying to test what you wrote and updated my question, but there is some mistake in my JS because no colored rectangles are drawn :( – likejudo Jan 31 '20 at 16:05
  • 1
    I do not think you can put a – SnorreDan Jan 31 '20 at 16:46
  • But the point of creating a random colored shape is to distinguish if the rectangles change color (entire page was reloaded) or whether only color of rectangle in component changes (then only component was reloaded). – likejudo Jan 31 '20 at 19:13
  • Right, well you could do a console log in the ngOnInit of the other components as well, but with a different text. Then you should be able to see that only the console log from the HeroDetailComponent is printed in your console. – SnorreDan Jan 31 '20 at 19:20
  • This article says you can use script in Angular https://www.techiediaries.com/use-javascript-in-angular/ I would still like to draw the random colored rectangles. – likejudo Jan 31 '20 at 20:53