title: Angular routing adding parameters
body: <p>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</p>
  <pre><code>&lt;div class=&quot;text-center&quot; style=&quot;width: 100%&quot;&gt;
      &lt;h1&gt;home&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  <p>home.component.ts</p>
  <pre><code>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 {
    }
  
  }
  </code></pre>
  <p>login.component.html</p>
  <pre><code>&lt;div class=&quot;text-center&quot; style=&quot;width: 100%&quot;&gt;
      &lt;loginbox [clickLoginFunction]=&quot;login&quot;&gt;&lt;/loginbox&gt;
  &lt;/div&gt;
  </code></pre>
  <p>login.component.ts</p>
  <pre><code>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(&quot;HOLA&quot;);
      this.router.navigate(['/home']);
    }
  }
  </code></pre>
  <p>then i have a loginbox component:</p>
  <p>loginbox.component.html</p>
  <pre><code>&lt;div class=&quot;wrapper fadeInDown&quot;&gt;
    &lt;div id=&quot;formContent&quot; &gt;
  
      &lt;!--
      &lt;div class=&quot;fadeIn first&quot;&gt;
        &lt;img src=&quot;http://danielzawadzki.com/codepen/01/icon.svg&quot; id=&quot;icon&quot; alt=&quot;User Icon&quot; /&gt;
      &lt;/div&gt;
      --&gt;
      &lt;div class=&quot;m-3&quot;&gt;
        &lt;h1&gt;WigStat&lt;/h1&gt;
        &lt;form&gt;
          &lt;div class=&quot;mt-3&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;login&quot; class=&quot;fadeIn second&quot; name=&quot;login&quot; placeholder=&quot;username&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;mt-3&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;password&quot; class=&quot;fadeIn third&quot; name=&quot;login&quot; placeholder=&quot;password&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;mt-3&quot;&gt;
            &lt;input type=&quot;submit&quot; class=&quot;fadeIn fourth mt-4 mb-4&quot; value=&quot;Log In&quot; (click)=&quot;loginClick()&quot;&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;!--
      &lt;div id=&quot;formFooter&quot;&gt;
        &lt;a class=&quot;underlineHover&quot; href=&quot;#&quot;&gt;Forgot Password?&lt;/a&gt;
      &lt;/div&gt;
      --&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>loginbox.component.ts</p>
  <pre><code>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!: () =&gt; void;
    
    private emailOrUsername!: String;;
    private password!: String;
  
    constructor() {
     }
    
    ngOnInit(): void {
    }
  
    loginClick(){
      console.log(&quot;LLamada a la funcion interna del componente de login&quot;);
      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);
    }
  }
  </code></pre>
  <p>app-routing.module.ts</p>
  <pre><code>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 { }
  </code></pre>
  <p>When I load the main page it appears the following</p>
  <p><a href="https://i.stack.imgur.com/mckOo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mckOo.png" alt="enter image description here" /></a></p>
  <p>so far so good, but if I press the button LOG IN:</p>
  <p><a href="https://i.stack.imgur.com/CVNk4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CVNk4.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/UUHwe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UUHwe.png" alt="enter image description here" /></a></p>
  <p>I am not an expert in angular but I know the basic and I can not find info about what is happening.</p>
  <p>Thanks in advance</p>