Angular routing adding parameters

Question

HI I have the following and simple angular 12 proyect with a login page and a home page. The code is the following: home.component.html

<div class="text-center" style="width: 100%">
    <h1>home</h1>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls:['./home.component.css']
})
export class HomeComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit(): void {
  }

}

login.component.html

<div class="text-center" style="width: 100%">
    <loginbox [clickLoginFunction]="login"></loginbox>
</div>

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls:['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  constructor( private router: Router) { }

  ngOnInit(): void {
  }

  login(): void {
    console.log("HOLA");
    this.router.navigate(['/home']);
  }
}

then i have a loginbox component:

loginbox.component.html

<div class="wrapper fadeInDown">
  <div id="formContent" >

    <!--
    <div class="fadeIn first">
      <img src="http://danielzawadzki.com/codepen/01/icon.svg" id="icon" alt="User Icon" />
    </div>
    -->
    <div class="m-3">
      <h1>WigStat</h1>
      <form>
        <div class="mt-3">
          <input type="text" id="login" class="fadeIn second" name="login" placeholder="username">
        </div>
        <div class="mt-3">
          <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
        </div>
        <div class="mt-3">
          <input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In" (click)="loginClick()">
        </div>
      </form>
    </div>

    <!--
    <div id="formFooter">
      <a class="underlineHover" href="#">Forgot Password?</a>
    </div>
    -->

  </div>
</div>

loginbox.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';

@Component({
  selector: 'loginbox',
  templateUrl: './loginbox.component.html',
  styleUrls:['./loginbox.component.css']
})
export class LoginBoxComponent implements OnInit {
  
  @Input()
  clickLoginFunction!: () => void;
  
  private emailOrUsername!: String;;
  private password!: String;

  constructor() {
   }
  
  ngOnInit(): void {
  }

  loginClick(){
    console.log("LLamada a la funcion interna del componente de login");
    console.log(this.emailOrUsername);
    console.log(this.password);
    
    if(this.emailOrUsername === undefined || this.emailOrUsername === ''){
      this.showErrorModelInRegister('No se han introducido usuario');
      return;
    } else if (this.password === undefined || this.password === ''){
      this.showErrorModelInRegister('No se ha introducido password');
      return;
    }
    this.clickLoginFunction();
  }

  private showErrorModelInRegister(message:string){
    Swal.fire(message);
  }
}

app-routing.module.ts

import { LoginComponent } from './pages/login/login.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { MainComponent } from './pages/main/main.component';

const routes : Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: '**', pathMatch: 'full', redirectTo: '/login'}
]

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

When I load the main page it appears the following

so far so good, but if I press the button LOG IN:

I am not an expert in angular but I know the basic and I can not find info about what is happening.

Thanks in advance

Answer 1

Its output looks normal, you are not doing any validations, so when ever you click the button you will get the message and undefined for the emailOrUsername and password variables.

One thing I noticed here is that you have to use two way binding for emailOrUsername and password.

First import FormsModule in your AppModule.

    <div class="m-3">
      <h1>WigStat</h1>
      <form>
        <div class="mt-3">
          <input [(ngModel)]="emailOrUsername" type="text" id="login" class="fadeIn second" name="login" placeholder="username">
        </div>
        <div class="mt-3">
          <input  [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="password">
        </div>
        <div class="mt-3">
          <input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In" (click)="loginClick()">
        </div>
      </form>
    </div>

Now you will get values in user emailOrUsername and password.