angular 8 page not redirecting ( on click stuck to same page )

Question

My app is not redirecting to other page, url changing but page content remains the same. Thanks in advance.

1. app.component.html

<section id="login-page">
    <div class="container-fluid">
      <div class="row d-flex align-content-center vh-100">
        <div class="col-7 left-sec align-self-center">
          <div class="content-sec">
            <h2 class="mb-5">Sign In to continue</h2>
            <img class="mt-3" src="../assets/images/login-v2.72cd8a26.svg">
          </div>
        </div>
        <div class="col-5 right-sec align-self-center">
            <form>
                <div class="form-group">
                  <input type="email" class="form-control" id="empid" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="empPass">
                </div>
                <a routerLink="/dash">Dashboard</a>
                <button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
              </form>
        </div>
      </div>
    </div>
  </section>
  <router-outlet></router-outlet>

2. app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { LeftNavComponent } from './_hx/left-nav/left-nav.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    EmpDashComponent,
    EmpProfileComponent,
    LeftNavComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';



const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: AppComponent },
  { path: 'dash', component: EmpDashComponent },
  { path: 'profile', component: EmpProfileComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am not sure where exartly I am doing wrong, after compiling, got no error ui, while clicking on the login button url changing but the content of the page not changing. Please let me know, where i am doing wrong.

Answer 1

Don't use routerLink on your submit button: instead, in your component.ts, where you set the logic of your submit, use the Angular Router:

if(isLoginOk(this.loginData)){
   this.router.navigateByUrl(`/dash`);
}

Anyway, that's not working because wrote "dash" instead of "/dash":

<button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
<!-- change to -->
<button type="submit" class="btn p-cta" routerLink="/dash" routerLinkActive="active">Submit</button>