title: Send data through routing paths in Angular 11
body: <p>I don't know what's happending I'm trying to get id through route</p>
  <p>this's list.component.html</p>
  <pre><code>&lt;div class=&quot;table-responsive&quot;&gt;
      &lt;table class=&quot;table table-hover&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Email&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Start Date&lt;/th&gt;
              &lt;th class=&quot;d-none d-sm-block&quot; scope=&quot;col&quot;&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr class=&quot;table-info&quot; *ngFor=&quot;let item of [0,1,2,3,4]&quot;&gt;
              &lt;th scope=&quot;row&quot;&gt;Manuel&lt;/th&gt;
              &lt;td&gt;manuel@gmail.com&lt;/td&gt;
              &lt;td&gt;21/10/2021&lt;/td&gt;
              &lt;td class=&quot;bnt-group d-none d-sm-block&quot; role=&quot;group&quot; &gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning m-1&quot; (click)=&quot;onGoToEdit(item)&quot; &gt;Edit&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning m-1&quot; (click)=&quot;onGoToSee(item)&quot; &gt;See&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot; (click)=&quot;onGoToDelete(item)&quot; &gt;Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm adding item[0,1,2,3,4] for each  then it's sending to list.component.ts in attribute (click)</p>
  <p>thi's list.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, NavigationExtras } from '@angular/router';
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
  })
  export class ListComponent implements OnInit {
  
    navigationExtras: NavigationExtras = {
      state:{
        value: null
      }
    };
  
    constructor( private router: Router) { }
  
    ngOnInit(): void {
    }
  
    onGoToEdit(item: any): void{
      this.navigationExtras.state.value = item;
      this.router.navigate(['edit', this.navigationExtras]);
    }
  
    onGoToSee(item: any): void{
      this.navigationExtras.state.value = item;
      this.router.navigate(['details', this.navigationExtras]);
    }  
  
    onGoToDelete(item: any): void{
      alert(&quot;Delete&quot;);
    }
  }
  </code></pre>
  <p>so value item have been stored in this.navigationExtras.state.value</p>
  <p>and thi's edit.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, NavigationExtras } from '@angular/router';
  
  @Component({
    selector: 'app-edit',
    templateUrl: './edit.component.html',
    styleUrls: ['./edit.component.scss']
  })
  export class EditComponent implements OnInit {
  
    
    value = null
    
    
  
    constructor( private router: Router ) {
  
      const navigation = this.router.getCurrentNavigation();
      this.value = navigation.extras.state;
      console.log(this.value);
    } 
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>and from edit.component.ts I'm trying to get value item, but I test from <code>console.log(this.value)</code> but from console this is showing <code>undefined</code></p>
  <p>why I can get value item?? what I'm doing wrong?</p>