Route Data in Angular

Route data in Angular allows you to pass static data to a route. This tutorial covers the basics of setting up and using route data effectively in your Angular applications.

Setting Up Route Data

To set up route data, you need to define the data property in your route configuration:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, data: { title: 'About Us', description: 'Learn more about us.' } }
];

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  template: '
About Component
{{ title }}
{{ description }}
',
})
export class AboutComponent implements OnInit {
  title: string;
  description: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.title = this.route.snapshot.data['title'];
    this.description = this.route.snapshot.data['description'];
  }
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Accessing Route Data

Use the ActivatedRoute service to access the route data in your component:

// about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  template: '
About Component
{{ title }}
{{ description }}
',
})
export class AboutComponent implements OnInit {
  title: string;
  description: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.title = this.route.snapshot.data['title'];
    this.description = this.route.snapshot.data['description'];
  }
}

Dynamic Route Data

To handle dynamic changes to the route data, subscribe to the data observable:

// about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  template: '
About Component
{{ title }}
{{ description }}
',
})
export class AboutComponent implements OnInit {
  title: string;
  description: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.title = data['title'];
      this.description = data['description'];
    });
  }
}

Key Points

Conclusion

Route data in Angular provides a powerful way to pass static data to a route. By understanding and using route data effectively, you can create dynamic and user-friendly applications with static data passed through routes. Happy coding!