How do I replace entire html with another html (Angular 2)

Question

app.component.ts

<div>
<app-head></app-head>
<app-body></app-body>
</div>

head.component.ts

...
@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.scss'],
  providers: []
})
...

body.component.ts

...
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss'],
  providers: []
})
...

So the pages loads with content head + body but now I wanted to route to a different page and replace entire existing page with the new page. How do I do that?

In my app.module.ts I have the following...

const routes: Routes = [
{ path: 'newPage', component: NewComponent}
]

I wanted use when clicked a button to be redirected to this page and replace existing <app-head> and <app-body> is this possible?

If I just use below I still see the current <app-head> and <app-body>

<button type="button" (click)="loadNewPage()" >

body.component.ts

 loadNewPage() {
    this.router.navigate(['/newPage']);
  }

The results give me the current page.... and doesnt really apply since I am not concating the contents together. I want to replace the head.html and body.html with newpage.html from the NewComponent.ts

As @callback suggested, use router-outlet. Described in Angular router — Sujit Kumar Singh
– Sujit Kumar Singh, Commented Oct 2, 2018 at 18:15

Daniel Gimenez · Accepted Answer · 2018-10-02 18:19:12Z

4

You need to replace the content in AppComponent with a router-outlet component and move that replaced content to a new component such as HomeComponent. Use the HomeComponent in your default route so it will load when you initially visit the site.

It's probably best if you check the documentation for Routing & Navigation since this is a pretty fundamental topic in Angular and there are a lot of details you should learn before you get too far.

App.component.html

 <router-outlet></router-outlet>

home.component.html

 <div>
     <app-head></app-head>
     <app-body></app-body>
 </div>

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent }
  { path: 'newPage', component: NewComponent}
]

edited Oct 2, 2018 at 18:19

answered Oct 2, 2018 at 18:13

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

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

Comments

mgm87 · Accepted Answer · 2018-10-02 18:12:12Z

1

You will want to put a <router-outlet></router-outlet> in your app component and move what's in your current app component to a new component. Then update your routes to:

const routes: Routes = [
  { path: '', component: TheStuffYouMovedComponent },
  { path: 'newPage', component: NewComponent }
]

answered Oct 2, 2018 at 18:12

mgm87

9141 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do I replace entire html with another html (Angular 2)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related