Passing route data in Angular

💻 Tech

In Angular, if you have data that change based on the selected route and that you want to pass down to a component, you can pass it to data property of a Route and subscribe to ActivatedRoute to get the data.

// app.routes.ts
export const routes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'about', component: AboutPageComponent, data: { showFooter: false } }
];

// aboutpage.component.ts
export class AboutPageComponent implements OnInit{
  showFooter: boolean = true;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.data.subscribe(data => {
      this.showFooter = data['showFooter'];
    });
  }
}