Resolve Route Guard - Angular (Tutorial #27)

Resolve Route Guard in Angular - Tutorial no. 27

Resolve Route Guard in Angular allows us to provide the needed data for a route before the route is activated
Use this link to share this video :https://youtu.be/sJdxjGTD094
Resolve Route guard is very useful in such situation where data for component is very critical and we don't want to land on view with partial Data.

To use Resolve router guard or Resolver we need to create guard which will implement Resolve interface and Resolve interface will give one method to override called resolve. So now if component's data can come from any source (from mock data, or http API or service ) this resolve method will handle that. Then this Resolver or Resolve guard we will apply to our route using resolve property , and this resolve property will be a object which will take key: value .Here, the key will be your property name which need to call in component to get data and value will be the Resolver Name.

resolve: {
data: ResolveGuard
}

Now to access this data in component we need to do Dependency Injection and inject ActivateRoute . This activateRoute will give us data property to access the resolve key(data)

this.activateRoute.snapshot.data['data']


You can also visit my following videos:
CanActivateRouteGuard: https://youtu.be/PbmY7tTPqBs
CanActivateChild Route Guard: https://youtu.be/Z0PNK-n5iv0
Nested Routing: https://youtu.be/JfNLM0hq_uk
Router Parameters: https://youtu.be/35ZvxP4Me18
Routing: https://youtu.be/E8QOJ822Ta4

Angular Tutorial Series:
https://www.youtube.com/watch?v=WSu-G0gk3Ks&list=PLC8OkhrVTHNHi6Do0etu_wMvAvjdjukQp

Follow me on:
►Youtube : https://www.youtube.com/nishasingla
►Facebook : https://www.facebook.com/AngularJS4Beginners/
►LinkedIn : https://www.linkedin.com/in/nishasingla/
Telegram :https://t.me/angulartech