Unable to Navigate to other component page in angular 10 - html

Question

I am building a sample project named : Tennis Club Management using Angular 10. In this i have app component and dashboard component. In app.component.html, i have created login which takes 2 inputs username and password and contains login button. Now on login button click , it should validate the fields and navigate it to dashboard.html.
Below are the code files and screenshots
app.component.html
<div class="backgroundDiv">
<!-- <div>-->
<!-- <img class="img-fluid backgroundimage" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">-->
<!-- </div>-->
<div class="text-center">
<img class="rounded mx-auto d-block" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">
<div class="text-center">
<table class="table table-borderless">
<tr><h6>Admin Login</h6></tr>
<tbody>
<tr>
<th class="col-xs-5">Username</th>
<td class="col-xs-5"><input type="text" #username></td>
</tr>
<tr>
<th class="col-xs-5">Password</th>
<td class="col-xs-5"><input type="password" #password></td>
</tr>
<tr>
<td class="col-xs-5"><button class="btn btn-primary" (click)="validateLogin(username.value,password.value)">Login</button></td>
<td class="col-xs-5"><label class="forgot-password">Forgot Password ?</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg -->
<!-- https://i.pinimg.com/originals/81/23/d4/8123d454ca0cc8f36d311cebbd5d3922.png -->
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 = 'Tennis-Angular';
constructor(private router: Router) {}
// tslint:disable-next-line:typedef
validateLogin(username: string, password: string) {
if (username === 'mohit' && password === 'sharma') {
// alert('Login Successful !');
this.router.navigate(['../dashboard']);
} else if (username === '' && password === '') {
alert('Email and Password cannot be blank !');
} else if (username === '') {
alert('Email cannot be blank !');
} else if (password === '') {
alert('Password cannot be blank !');
} else {
alert('Incorrect Email or Password !');
}
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import {FormsModule} from '#angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterModule, Routes} from '#angular/router';
const appRoutes: Routes = [
{path: 'dashboard', component: DashboardComponent}
];
#NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule,
NgbModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.css
.backgroundDiv {
background: url('https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg') no-repeat center center fixed;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
opacity: 0.80;
}
.table {
display: block;
margin: 0 auto;
height: auto;
width: 25%;
background-color: white;
/*margin-top: 15%;*/
text-align: center;
}
.btn-primary {
margin-left: 20%;
margin-top: 10%;
}
.forgot-password {
margin-top: 8%;
}
img {
margin: 0 auto;
height: auto;
position: relative;
margin-top: 5%;
margin-left: 50%;
max-width: 25%;
height: auto;
}
tbody {
background-color: white;
}
h6 {
margin-left: 100%;
width: 150%;
margin-top: 5%;
color: mediumseagreen;
text-shadow: mediumseagreen;
}
dashboard.component.html
<p>dashboard works!</p>
Screenshots
Home Page Login
Note : The problem is after login , the URL shows the navigation route(path), but the page is not getting displayed. Any solution please ?

Answer 1

There is no <router-outlet></router-outlet> in you app.component.html.
I would suggest create a login component and move your app component code to login component and have alone on your app.component.html.
So whenever you change route your previous component HTML won't render.