CODEWITHSUNDEEP
angular
EduBw
EduBw

Reputation: 942

router.navigateByUrl don't send value Angular

I am trying send 1 value between components Angular ... but when I arrive in my component I don't receive nothing.

Component1:

onCellClicked(event) {
    if (event.colDef.field === 'dni') {
      console.log('dni en mi componente : ', event.value);
      this.router.navigateByUrl('probarborrar/', event.value);
    }
  }

First check if the Cell is dni, then I show "console.log(event.value)" It is true, I can see my dni. Finally I go the second component.

Routing.

     {
        path: 'probarborrar/:idUser',
        component: ProbandoBorrarComponent,
        data: {
          breadcrumb: 'probar'
        }
      }

Component2.

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

@Component({
  selector: 'app-probando-borrar',
  templateUrl: './probando-borrar.component.html',
  styleUrls: ['./probando-borrar.component.scss']
})
export class ProbandoBorrarComponent implements OnInit {
  public dni;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.dni= this.route.snapshot.paramMap.get('idUser');
    console.log('en probando es :', this.dni); -->nothing
  }
}

html

<p style="color:white;background-color:black;">
  probando-borrar works! : {{ dni }}
</p>

I can arrive Component2 but I don't receive nothing.

enter image description here

Upvotes: 1

Views: 6259

Answers (2)

Aamir Khan
Aamir Khan

Reputation: 3031

You should be using the navigate function for this. Apparently navigateByUrl has an issue with queryParams. Secondly, you need to pass a navigationExtras object to the navigate function.

Checkout the code sample.

this.router.navigate(['probarborrar'], {queryParams: {idUser: event.value}});

In component2, retrieve the value like

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.queryParams.subscribe((params) => {
      console.log(params['idUser']);
  });
}

Working Demo: https://stackblitz.com/edit/angular-ytfgp8

Upvotes: 9

Anuradha Gunasekara
Anuradha Gunasekara

Reputation: 6983

Try this.

import { map } from 'rxjs/operators';

ngOnInit() {
    this.dni = this.route
      .queryParamMap
      .pipe(map((params) => {
        const param = params.get('idUser');
        console.log(param);
        return param;
      }
      ));
  }

Read more about routing and naviagtion in here.

Upvotes: 0

Related Questions