Passing data to routes in angular

In this tutorial, we are going to learn about how to pass the data to angular routes.

In angular, we can pass the data to a route by using data object and access that data inside components by using ActivatedRoute.

Passing data to route

{path: "post", component : PostComponent,data: {msg: "Welcome" }}

In the above code, we passed data to a post route by using the data object data: {msg: "Welcome" }.

Accessing data inside components

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {

  mymsg: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe((data) => {      this.mymsg = data.msg;    });  }}

In the above component, we first imported ActivatedRoute from the @angular/router package and injected it to PostComponent constructor.

ActivatedRoute: It helps us to access the currently loaded route data.

Inside ngOnInit method we are accessing the data object by subscribing it and updating the mymsg property.

data.msg where msg property is the same we passed to that route.