CODEWITHSUNDEEP
javascripthtmlangular
Yash Anand
Yash Anand

Reputation: 29

Routing displays content of previous page too

I am building a web-page which starts with a simple login box which contains username,password with input boxes and two buttons with name login and register.

After clicking on the login button my page should route to another component which contains a navigation bar. It does route, no problem there. But the login box doesn't disappears after routing.

So after routing, navigation bar appears but the login box is still there.

APP.COMPONENT.HTML

      <div class="background-image">

          <router-outlet></router-outlet>
         <div class="content2">

          <h2 >Login</h2>
         <br>

        <form>
       <div class="form-group">
              <label style="margin: 5px">Username</label>

           <input type="text"  />

           </div>
            <div class="form-group">
             <label style="margin: 7.5px">Password</label>

             <input type="password" />

         </div>
           <div class="form-group">
       <button (click)="onclick()" [disabled]="loading" class="btn btn- 
        primary">Login</button>
      <a href="/register" class="btn btn-link">Register</a>
            </div>
          </form>
      </div>
         </div>

APP.COMPONENT.TS

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
       selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
           })
   export class AppComponent {
       title = 'welfareUI';
       constructor(private router: Router){

         }
      onclick()
      {
          this.router.navigateByUrl('/navbar');
      }

     }

Upvotes: 2

Views: 2910

Answers (6)

user3820036
user3820036

Reputation: 13

There may be also a scenario when you are forcibly loading some component just before after router-outlet tag as in my scenario.

<div class="container">
   <app-header></app-header>  
   <app-Product></app-Product>  
   <router-outlet></router-outlet>
</div>

On line number 2, I have all my router links. The main cause was line number 3 which is a component I was loading forcibly.

So after removing third line, everything was working properly. so if you are using Router-Outlet then let it decide about Components and their loadings.

Upvotes: 0

Sunil Rawat
Sunil Rawat

Reputation: 35

Create login component and load it initially into the router outlet. routes: [{path : '', component: LoginComponent}]

After cliking on login button call different route you want to navigate.

routes: [{path : '/abc', component: abcComponent}]

Upvotes: 0

Dev
Dev

Reputation: 64

@Yash Anand Whatever @Adrita Sharma has said that is correct. You create a new login component and keep login html markup in login.component.html. keep only <router-outlet></router-outlet> in app.component.html Now when you click on login button it will only display you navbar. Note- Make sure by default you have configured your route to go to login page in app.module.

routes: [{path : '', component: LoginComponent}]

Upvotes: 1

deepica
deepica

Reputation: 122

you have create loginComponent and place your login code inside it and then use router path to show login component as default { path: '',redirectTo: '/heroes',pathMatch: 'full'}, can refer below link https://angular.io/guide/router#the-default-route-to-heroes

Upvotes: 0

Md Owais
Md Owais

Reputation: 123

Create separate component for login. Insert the HTML code in login.html and place router outlet in app.html file.

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

This is because you have placed login html in app.component.html. <router-outlet></router-outlet> replaces the template of the current route, except that all the html in this file is constant.

You can create a separate login component. By default navigate to login component. Donot keep login html in app.component.html

Upvotes: 0

Related Questions