🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 50 : 04
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

    Pass static data to a component as part of the route transition in Angular

    Juri StrumpflohnerJuri Strumpflohner
    angularAngular
    ~7.0.0

    While route resolvers are useful fetching the data to be passed to the routed component, statically configured data is useful for configuration purposes. In this lesson we learn about the data property which is part of Angular's route definition and which allows us to pass in some static data that can be used from within a route resolver, route guard or even the routed component to customise it's behaviour.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: The Angular router allows us to pass in not only dynamic data via, for instance, a resolver, as in this case, but also some static data, which happens at compile time. That can be especially useful if you want to configure the router component based on different kind of scenarios.

    What we can do is to use a specific property here which is called data. Here, within that data object, we can simply specify some key. For instance, let's say "loadAddresses." We set it to true. As a result, we can now access that loadAddresses properly in different kind of places.

    For instance, let's take a look here at that personData resolver which has been specified here. We can simply jump in here. Wherever we have that route object, we can simply access the route.data, in this case loadAddresses.

    Let's console out this personData resolver. Let's console out here the loadAddresses. If we open up the developer tools on our console here, we can already see that here is the personData resolver, which prints out true as we specified in our properties there.

    Similarly, of course, we can go into the personDetail component, then access the same values there as well. Here, you can see we already subscribe to the data. We can do something like console.log personDetail component and then log out data loadAddresses. You can see how that gets printed out.

    Otherwise, you simply need to access the snapshot here, which in this case is perfectly fine because the data, obviously, in this case is totally static and not dynamically resolved. Of course, this is not limited to Boolean values. In that data property here, we could also specify an entire object. That really depends on the use case which we want to solve.