Send data through routing paths in Angular

by

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:

enter image description here

2) Route Optional Parameters:

enter image description here

3) Route Query Parameters:

enter image description here

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

More Related Contents:

  1. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  2. Angular2 How to navigate to certain section of the page identified with an id attribute
  3. How do I navigate to a parent route from a child route?
  4. Multiple canActivate guards all run when first fails
  5. Best method to set different layout for different pages in angular 4
  6. How to set without causing `unsafe value` exception?
  7. Should I write methods as arrow functions in Angular’s class
  8. Dynamic template reference variable inside ngFor (Angular 9)
  9. Angular 4: no component factory found,did you add it to @NgModule.entryComponents?
  10. Compile dynamic HTML in Angular 4/5- something similar to $compile in Angular JS
  11. What is in Angular 2 Opaque Token and What’s the Point?
  12. Ionic – Horizontal scroll tab for Categories [duplicate]
  13. Difference between interfaces and classes in Typescript
  14. Angular2 router.navigate refresh page
  15. Angular 2 ng2-bootstrap modal inside child component called from parent component
  16. formGroup expects a FormGroup instance
  17. Angular2 @Input to a property with get/set
  18. Angular 2: How to use JavaScript Date Object with NgModel two way binding
  19. How to truncate text in Angular2?
  20. Angular Material 2 DataTable Sorting with nested objects
  21. Angular 2 – Services consuming others services before call a method
  22. want to show more data in another component when view in detail button is clicked (angular 6)
  23. What is the difference between “ng-bootstrap” and “ngx-bootstrap”?
  24. Disable Input fields in reactive form
  25. How to access host component from directive?
  26. ::ng-deep going to be deprecated – Any alternatives?
  27. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  28. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Custom Exception Handler in Angular2

Leave a Comment