Angular - Getting Route Param is always 0

Question

I have a routerlink in a in Angular. I am trying to send some data along with the routerlink. This is the html code of the component:

html code:

<a routerLink="/register" [queryParams]="{ selRole: 1 }">Register Now</a>

In my component:

ngOnInit() {
    this.route.queryParams
        .subscribe(params => {
            this.selRole = params['selRole'] || 0;
    });
    console.log(this.selRole)
}

But I always keep getting a 0. What exactly am I doing wrong here?

Possible duplicate of [Angular 2 - Return data directly from an Observable](https://stackoverflow.com/questions/37867020/angular-2-return-data-directly-from-an-observable) — jonrsharpe, Dec 09 '17 at 13:18

Sajeetharan · Accepted Answer · 2017-12-09T13:17:33.697

Try to use the same format in [routerLink] and [queryParams] even though it is not causing the issue,

<a [routerLink]="['/register']" [queryParams]="{ selRole: 1 }">Register Now</a>

also place your console.log after assigning the params to selRole which is the root cause

ngOnInit() {
    this.route.queryParams
        .subscribe(params => {
            this.selRole = params['selRole'] || 0;
            console.log(this.selRole)
    });
}

score 0 · Answer 2 · edited Jan 06 '18 at 22:10

console.log(this.selRole) is run before the queryParams.subscribe is called.

The queryParams is an observable and you are subscribing to that observable. You will only get the value once that is called.

To get the value you can move the console.log into the subscribe block.

ngOnInit() {
    this.route.queryParams
        .subscribe(params => {
            this.selRole = params['selRole'] || 0;
            console.log(this.selRole)
    });
}

Angular - Getting Route Param is always 0

2 Answers2