💉 Shot #9: How to get route data

Introduction

Angular routing configuration allows us to add some extra data to Route declaration. Let’s assume we have PageComponent and routing configuration presented below. Our goal is to get data in component.

Step 1: Inject ActivatedRoute

Step 2: Get route data

ActivatedRoute has data attribute with type Observable<Data>, if you assume that route data might change, you need to subscribe to it. In most cases route data is static and you can use route snapshot:

Shot

Here is the final shot:

Useful Links

1. Routing and Navigation