Sending and receiving object using router in Angular 9

Question

I am using latest version of angular 9 and also latest version of nodejs. Below is the sample code

From app.component

<router-outlet></router-outlet>

From app.component.ts

import { Component, OnInit } from '@angular/core';
import { baseObject } from '../app/baseObject';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  oBase : baseObject;
  ngOnInit(): void {
    this.oBase.customerId = 1;
    this.oBase.customerName = 'jain';
    this.oBase.stateId = 10;
    this.oBase.customerAddress = 'Bangalore';
    this.oBase.pincode = 12233;
  }
}

From app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StateComponent } from '../app/state/state.component'

const routes: Routes = [
  {path:'', redirectTo:'/statemain', pathMatch:'full'},
  {path: 'statemain', component: StateComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

From app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StateComponent } from './state/state.component';

@NgModule({
  declarations: [
    AppComponent,
    StateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

class properties

export class baseObject {
    customerId: number;
    stateId: number;
    customerName: string;
    customerAddress: string;
    pincode: number;
}

state -compnent.ts

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

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

}

This is the problem.

How do I pass an entire object to component using router? (note object is initialized in app.component)
How do I receive an entire object in the 'ngOnInit' method of state component? Please help

see this https://stackoverflow.com/questions/44456508/passing-data-to-router-angular-2 , it may be helpful — Mohamed Ali RACHID, May 17 '20 at 19:20

score 0 · Answer 1 · answered May 17 '20 at 19:42

There are multiple ways to achieve it. One way would be to send a serialized object in the navigate method. Try the following

app.component.ts

export class AppComponent implements OnInit {
  oBase : baseObject;

  ngOnInit(): void {
    this.oBase = {
      customerId: 1, 
      customerName: 'jain', 
      stateId: 10, 
      customerAddress: 'Bangalore',
      pincode: 12233
    }
  }

  goToState() {
    this.route.navigate(['/statemain', { 'base': JSON.stringify(this.oBase) }])
  }
}

Bind the goToState() function to any element in the AppComponent template.

And in the StateComponent get the parameter using the ActivatedRoute.

state.component.ts

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

import { baseObject } from '../app/baseObject';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  oBase: baseObject;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.oBase = JSON.parse(this.route.snapshot.paramMap.get('base'));
    console.log(this.oBase);
  }
}

Sending and receiving object using router in Angular 9

1 Answers1