Angular how to pass data using route

Admin 1
Viewed 8351

I have two components as follows:

  1. product-table where I display a table
  2. product-message where I display the result of the click on the table

I make the components communicate with input and output everything works very well.

Now I want to try the new way with pass the data via the routing.

product-table.html

<!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
  (click)="selected(row)" (click)="navigate(row)"></tr> // i try with navigate method here

product-table.ts

export class ProductTableComponent implements OnInit ,OnDestroy{
  
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  public dataSource!: MatTableDataSource<Product>;
  
  private sub: Subscription = new Subscription;
  
  @Output() selectedArrayEnfant2 = new EventEmitter();
  
  constructor(private productService: ProductService, private router: Router) { }
  
  ngOnInit(): void {
    this.getAllProduct();
  }
  
  getAllProduct() {
    let resp = this.productService.getAll();
    this.sub =resp.subscribe(result => {
      this.dataSource =  new MatTableDataSource<Product>();
      this.dataSource.data = result as Product[];
    });
  }
  
  selected(row:Product) {
    this.selectedArrayEnfant2.emit(row);
  }
  
  navigate(row:Product) {
    this.router.navigate(['/msg', row]); // i try something here but this method open the new page instead just pass data in message component via routing
  }

product.message.ts

export class ProductMessageComponent implements OnInit, OnChanges {

  @Input() public selectedArrayEnfant1!: Product;

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {}

  ngOnInit(): void {
   
  }
}

product.message.html

<h1>{{selectedArrayEnfant1?.name}}</h1>

I display the both components in product.page.html

product.page.html

<div class="center">
    <app-product-table (selectedArrayEnfant2)="receive($event)"></app-product-table>
    <app-product-message [selectedArrayEnfant1]="selectedArrayParent"></app-product-message>
</div>

app.routing.module

const routes: Routes = [
  { 
    path: '', 
    redirectTo: '/hello', pathMatch: 'full' 
  },
  {
    path: 'product',
    loadChildren: () => import('./components/product/module/product.module').then(m => m.ProductModule),
  },
  { 
    path: 'msg',
    component: ProductMessageComponent
  }
];
angular-material angular typescript
2 Answers

If you want to pass an object(assuming row is an object here), you need to stringify it to a string and pass as a string. After when you get it, you need again to parse it into an object.

So, for navigation do this:

this.router.navigate(['/msg', {my_object: JSON.stringify(row)}]);

and later parse it back it in the recipient(msg) component

this.Obj = JSON.parse(this.route.snapshot.paramMap.get('my_object'));

Change the constructor parameters like this:

constructor(
    ...    
    private router: Router,
    private route: ActivatedRoute
    ) { }
user_134406690

To pass a Data

const queryParams = { ids: row };
this.router.navigate(['/product/msg'], { queryParams: queryParams });

To get a Data

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.name = params['name'];
  });
}

route

  { 
    path: 'product/msg',
    component: ProductMessageComponent
  }
user_123368820
Related