How do I pass data to Angular routed components?

by

Update 4.0.0

See Angular Angular Router – Fetch data before navigating for more details.

Original

Using a service is the way to go. In route params you should only pass data that you want to be reflected in the browser URL bar.

See Angular Angular Cookbook Component Communication – Bidirectional Service.

The router shipped with RC.4 re-introduces data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch: 'full'},
  {path: 'heroes', component: HeroDetailComponent, data: {some_data: 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

See also the Plunker.

More Related Contents:

  1. How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
  2. How to inject window into a service?
  3. How do I create a singleton service in Angular 2?
  4. flatMap, flat, flatten doesn’t exist on type any[]
  5. Call child component method from parent class – Angular
  6. Angular 2 – Execute code when closing window
  7. How can I unit test a component that uses the Router in Angular?
  8. How to iterate object keys using *ngFor?
  9. Angular 6: saving data to local storage
  10. Angular 2 Form “Cannot find control with path”
  11. vs
  12. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  13. Angular 2 Basic Authentication not working
  14. Recording the web page by using Record RTC with Angular
  15. How to smooth scroll to page anchor in angular 4 without plugins properly?
  16. Angular 2 + Ionic 2: Detect if an object was modified
  17. Http.get() working but not working in build(Release/Debug) in Ionic 4
  18. Property ‘json’ does not exist on type ‘Object’
  19. inject() must be called from an injection context
  20. Update parent component property from child component in Angular 2
  21. How to use variable to define templateUrl in Angular2
  22. Behaviour subject initial value null?
  23. How can I create an observable with a delay
  24. Property ‘toPromise’ does not exist on type ‘Observable’
  25. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  26. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  27. Page transition animations with Angular 2.0 router and component interface promises
  28. Angular load external configuration before AppModule loads
  29. Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
  30. Angular 2 ngOnInit not called

Leave a Comment