How to recover data from Angular Route component?

Question

I saw in the documentation Angular that it is possible to recover data stored in the property date (receiving an object) from a route. I have, in this case an application with the following routes:

const routes: Routes = [
  {
    path: '',
    component: UserComponent,
    data: {
      title: 'Home'
    }
  },
  {
    path: 'bank-accounts',
    component: BankAccountsComponent,
    data: {
      title: 'Contas correntes'
    }
  },
];

How can I recover this data (the title in case) in a route?

Answer 1

Hi,

To recover the data follow the example below:

Bankaccountscomponent:

class BankAccountsComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => alert(JSON.stringify(v)));
  }

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

For more details see the Angular doc https://angular.io/guide/router#fetch-data-before-navigating

See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#! #bidirectional-service