Angular - Issue with routerLink and state

From an html page I want to route to another page using routerLink and state. There's no issues with <a> tag, during ngOnInit in landing page, I can retrieve state as expected. Using <button> tag home page is navigate as well but state results undefined.

What's my wrong?

html of login page

<button routerLink="/home" [state]="navExtra.state">
Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go Home Page via a</a>


ts of login page

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

@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
navExtra: NavigationExtras = {
state: { data: { a: 'a', b: 'b' } }
};
constructor() {}

ngOnInit() {}
}


ts of home page

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

@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
constructor(
private router: Router
) {}

ngOnInit() {
console.log(this.router.getCurrentNavigation().extras.state);
}
}

Continue reading...