I want to pass a value with URL using routerLink
and read that value on another page. Like I have Modules and Submodules. On select of first record the id of that record pass to User page. After read that Userid I want to show detail of that User and modules/submodules.
So How can I pass and get the Values(object)?
Userdetails Component class:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'userdetail',
templateUrl: './userdetail.component.html',
styleUrls: ['./userdetail.component.css']
})
export class UserdetailComponent implements OnInit {
username: any;
moduleid: any;
submoduleid: any;
login: any;
constructor(private _route:ActivatedRoute){}
ngOnInit() {
this._route.params.subscribe(params => {
this.username = params['moduleid']
});
}
}
Login Component class:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Userslogin } from 'app/users/userslogin';
import { Router } from '@angular/router';
import { UserloginService } from 'app/userlogin/userlogin.service';
import { User } from 'app/userlogin/user';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
myForm: FormGroup;
user = new User;
login: any;
modules=[];
module: any;
usernam: any;
pass: any;
moduleid: any;
submoduleid: any;
submitted = false;
i; j;
constructor(private editionService: UserloginService, private router: Router) {
const username = new FormControl('', Validators.required);
const password = new FormControl('', Validators.required);
this.myForm = new FormGroup({
username: username,
password: password
});
}
ngOnInit() {
}
loginuser() {
this.usernam = this.myForm.get('username').value;
this.pass = this.myForm.get('password').value;
this.editionService.getlogin(this.usernam, this.pass ).subscribe(
login => this.login = login);
this.moduleid = this.login[0].moduleid;
if(this.login != null){
this.router.navigate(['userlogin/userdetail', this.moduleid] );
}
else {
alert('Click login')
}
}
}
Router:
export const UserloginRoutes: Routes =[{
path: '',
children: [
{path: 'login',
component:LoginComponent,
},
{path:'userdetail/:moduleid', component: UserdetailComponent}
]}]
Best Answer
define the router Link property binding to the html page
then get the id using ActivatedRoute module
//import the ActivatedRoute form angular router
} }