CODEWITHSUNDEEP
htmlangular
EliKnaffo
EliKnaffo

Reputation: 354

Angular routing sendings to correct URL but nothing changes

I have set up my routing. the navigate sends me to the correct URL when I login to my App but nothing changes.

Instead of changing from login screen to the defulat "my-comp works". it stays on the same page.

i havn't found any answer to this online

this is the login Component:

import { Component, OnInit } from '@angular/core';
import { LoginDetailes } from 'src/app/Entities/LoginDetailes';
import { LoginService } from 'src/app/services/login.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
public loggedin:boolean;
public loggedClient:string;
public errormessage:string;
public loginDetailes = new LoginDetailes();
  constructor(private loginservice:LoginService,private router:Router) { }

  ngOnInit() {
  this.loggedin=false;
  }
public onLogin():void{
  const observable=this.loginservice.login(this.loginDetailes);
  observable.subscribe((returnedLoginDetailes:LoginDetailes)=>{
    alert("Welcome "+this.loginDetailes.name);
    this.loggedin=true;

  if(this.loginDetailes.clientType=="ADMIN"){
    this.router.navigate(['/adminLay']);
  }
  else if(this.loginDetailes.clientType=="COMPANY"){
  this.router.navigate(['/login']);
  }
  else if(this.loginDetailes.clientType=="CUSTOMER"){
    this.router.navigate(['/login']);
  }else{
    alert("Wrong Login Detailes");  
  }

  }, err => {
  this.errormessage=err.console.error("Wrong Detailes please Check Again!");
  alert(this.errormessage);
}
  )}}

this is the login HTML:

<table>
    <label>Name</label>
  <tr>
    <input [(ngModel)]="loginDetailes.name" class="enjoy-css" type="text" placeholder="ID" >
  </tr>
  <label>Password</label>
  <tr>
    <input [(ngModel)]="loginDetailes.password" class="enjoy-css" type="password"  placeholder="Password">
  </tr>
  <tr>
   <select [(ngModel)]="loginDetailes.clientType">
     <option  value="ADMIN">ADMIN</option>
     <option  value="COMPANY">COMPANY</option>
     <option  value="CUSTOMER">CUSTOMER</option>
   </select>
  </tr>
  <tr>
    <input  type="button" (click)="onLogin()" value="Login" Router>

  </tr>
</table>

router module:

const routes:Routes=[
{path:'login',component:LoginComponent},
{path: '',component:LoginComponent},
{path:'crtComp',component:CreateCompanyComponent},
{path:'adminLay',component:AdminLayoutComponent}
]
@NgModule({
exports:[RouterModule],
imports: [ RouterModule.forRoot(routes) ]
})
export class AppRoutingModule { }

i dont have anywhere

Upvotes: 1

Views: 293

Answers (1)

Wasif Khalil
Wasif Khalil

Reputation: 2247

Router module

export const appRoutes: BaseRoutes = [
  {
    path: 'login', component: BlankTemplateComponent, isTemplate: true,
    children: [
      {
        path: '', component: LoginComponent, pathMatch: 'full'

      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

App Module

@NgModule({
  declarations: [

  ],
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: true }),

  ],
  entryComponents: [BlockUiTemplateComponent],

  bootstrap: [AppComponent]
})
export class AppModule { }

Last step ur html file should have <router-outlet>

<div id="loading-wrapper" *ngIf="loading">
    <div id="loading-text">LOADING</div>
    <div id="loading-content"></div>
</div>
<router-outlet>
</router-outlet>

router-outlet is where your html will be displayed when u redirect

the above code is not same as yours, it was just to give you example to setup routes

Upvotes: 1

Related Questions