Send data through routing paths in Angular

Question

Is there anyway to send data as parameter with router navigate   I mean  something like this example  as you can see the route has a data parameter  but doing this it s not working   this router navigate   heroes     some-data   othrData      because some-data is not a valid parameter  How can I do that  I don t want to send the parameter with queryParams

User · Answer

There is a new method what came with Angular 7.2.0

https://angular.io/api/router/NavigationExtras#state

Send:

this.router.navigate(['action-selection'], { state: { example: 'bar' } });

Receive:

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
}

You can find some additional info here:

https://github.com/angular/angular/pull/27198

The link above contains this example which can be useful: https://stackblitz.com/edit/angular-bupuzn

User · Answer

Best I found on internet for this is ngx-navigation-with-data  It is very simple and good for navigation the data from one component to another component  You have to just import the component class and use it in very simple way  Suppose you have home and about component and want to send data then HOME COMPONENT import   Component  OnInit   from   angular core   import   NgxNavigationWithDataComponent   from  ngx-navigation-with-data     Component    selector   app-home    templateUrl     home component html    styleUrls      home component css      export class HomeComponent implements OnInit    constructor public navCtrl  NgxNavigationWithDataComponent        ngOnInit          navigateToABout       this navCtrl navigate  about    name  quot virendta quot            ABOUT COMPONENT import   Component  OnInit   from   angular core   import   NgxNavigationWithDataComponent   from  ngx-navigation-with-data     Component    selector   app-about    templateUrl     about component html    styleUrls      about component css      export class AboutComponent implements OnInit     constructor public navCtrl  NgxNavigationWithDataComponent      console log this navCtrl get  name        it will console Virendra   console log this navCtrl data      it will console whole data object here      ngOnInit            For any query follow https   www npmjs com package ngx-navigation-with-data Comment down for help

User · Answer

There is a lot of confusion on this topic because there are so many different ways to do it   Here are the appropriate types used in the following screen shots   private route  ActivatedRoute private router  Router   1  Required Routing Parameters     2  Route Optional Parameters      3  Route Query Parameters     4  You can use a service to pass data from one component to another without using route parameters at all   For an example see  https   blogs msmvps com deborahk build-a-simple-angular-service-to-share-data   I have a plunker of this here  https   plnkr co edit KT4JLmpcwGBM2xdZQeI9 p preview

User · Answer

In navigateExtra we can pass only some specific name as argument otherwise it showing error like below  For Ex- Here I want to pass customer key in router navigate and I pass like this-  this Router navigate   componentname    cuskey   customerkey response key       but it showing some error like below   Argument of type    cuskey    customerkey  any        is not assignable to parameter of type  NavigationExtras     Object literal may only specify known properties  and  cuskey  does not exist in type  NavigationExt   Heading   ras       Solution  we have to write like this   this Router navigate   componentname    state   customerkey response key

User · Answer

dev-nish Your code works with little tweaks in them  make the   const navigationExtras  NavigationExtras       state        transd   TRANS001       workQueue  false      services  10      code   003           into   let navigationExtras  NavigationExtras       state        transd          workQueue        services        code              then if you want to specifically sent a type of data  for example  JSON as a result of a form fill you can send the data in the same way as explained before

User · Answer

Latest version of angular  7 2    now has the option to pass additional information using NavigationExtras   Home component  import     Router    NavigationExtras   from   angular router   const navigationExtras  NavigationExtras       state        transd   TRANS001       workQueue  false      services  10      code   003         this router navigate   newComponent    navigationExtras       newComponent  test  string  constructor private router  Router      const navigation   this router getCurrentNavigation      const state   navigation extras state as       transId  string      workQueue  boolean      services  number      code  string        this test    Transaction Key     state transId     lt br   gt  Configured     state workQueue     lt br   gt  Services     state services     lt br   gt  Code      state code        Output    Hope this would help

[angular] Send data through routing paths in Angular

Examples related to angular

Examples related to routing

Examples related to angular-router