Angular 4 Refresh section of page only

Question

Hi community I have a Plunker where I have implemented this flow:

Updated Plunker: I solved but header component gets called each time and I have to put my header component in each html is there a better way to do it?

1. Login
2. Show list of countries (User info on top)
3. Click on one of the countries and show details about it (Problem is here)
4. Go back to list

I need to refresh only the section of the countries list, but in my plunker you can see the whole page is refreshing I want to keep the user info on top (static).

I have little experience. Thanks a lot!

@Component({
selector : 'login',
template: `
<input type="text" value="james">
<input type="password" value="123">
<button (click)="logIn()">Login</button>
`
})
class LoginComponent {
constructor(private route: ActivatedRoute,
            private router: Router) { }

    logIn () {
        //LOGIN LOGIC
        this.router.navigate(['/base']);
    }
}

Answer 1

I finally managed to solve this! I had found the way to do it but it wasn't the correct aproach. Here is the solution: http://plnkr.co/edit/pNoGFP6fva4SYmcspoOj?p=preview

I used children components in the routing configuration and change the way navigations are done:

 this.router.navigate(['/base',  { outlets: { mod : ['countrydetail', country_id ] } } ]);

where:

• /base is the origin component, where the navigation is starting.
• mod is the outlet name (children in app.routing)
• countrydetail the child component name
• country_id: a parameter