CODEWITHSUNDEEP
angularjsangular-ui-router
affeto
affeto

Reputation: 351

How can I completely replace the app component html in Angular

How can we completely replace the app component html with another component html?

I tried using routerlink to display another html in the app component html(root html).Below is the code in appcomponent html. 

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Log In</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Sign Up</a></h2>
  </li>
  <li>
    <h2><a target="_parent" rel="noopener" routerLink="/dashboard">Continue</a></h2>
  </li>
  <li>
<h2><a target="_parent" rel="noopener" href="https://blog.angular.io/">Test</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

When I click "Conitnue", the dashboard html is appended in the area, but what I expect is dashboard html completely overlap the contents of app component html.

Could you please tell me how to do it? Thanks

Upvotes: 1

Views: 1911

Answers (2)

Ramiro G.M.
Ramiro G.M.

Reputation: 477

The real solution after some research and understanding resulted to be the correct application of routing of parent and child...an example:

    const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent, children: [
    {path: '', redirectTo: 'login', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'dashboard', component: DashboardComponent}
    ]
    },
    {path: '**', component: AppComponent }
    ];

- http://localhost:4200/ redirects to -> http://localhost:4200/home/login - Thus, on correct login -> http://localhost:4200/home/dashboard

You have to keep in mind that your AppComponent.html has to have <router-outlet></router-outlet> tags in order to have a placeholder set for the children to be loaded.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222692

You can try creating a new component by adding the above content to a new HTML named navigation and place that whenever you needed

Kep you app.component.html empty as possible

Upvotes: 1

Related Questions