Create Reusable Component In Angular - Angular Reuse Strategy
loader image
Angular Web Development

Angular Reuse Strategy – Learn To Create Reusable Component In Angular

Routing is the basic concept in angular which is used to navigate the application from one page to another page and without routing nothing can be done in our app. Luckily, Angular has its in-built routing which will defaultly navigate to the home page and also angular allow us to create custom routes which we can set as a default home page for our application. On other hand, if you want to write a custom route then you can just import the routing module into the app module and from there you can initialize the routes. Be it custom routes or in-built routes, using Router library you can call any of these Routes on any where of your application. Another added feature of Router is that we can even pass the parameters or query parameters through the routes. However, While developing the application, most of the time we ought to face routing issue in Angular, Though we use different parameters & query parameters, we can’t able to navigate the page to the same page from which we are in. To overcome this problem, we are using the concept called reuse strategy in angular.

Reuse Strategy In Angular

The first step of using the reuse strategy in angular is that we want to extend the reuse strategy abstract class of the Router. For that, we need to write custom reuse strategy class and we should import it on the app module and finally we should provide the function in the provider of an app module. Now you can import the “RouteReuseStrategy” class from the angular/router library and to import the class in the app module follow the below code,


Related: Building Nested Reactive form In Angular 4

Next, we are going to see about the abstract classes in “RouteReuseStrategy” class from the router.


Above abstract class contains 5 methods,

[code] shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot),
abstract shouldDetach(route: ActivatedRouteSnapshot),
abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void
abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle;

shouldReuse() method is used to tell whether we want to reuse the route or not. If it returns true then it will reach the shouldDetach() method and shouldAttach() method. If shouldDetach() returns true then it will get into the store method where you can store the data that are coming from routes, on other case, if shouldAttach() method returns true then it will reach to Retrieve where you can retrieve the stored data from routes and it will end the process. If both returns false then it will directly quit the process.

And if you’re not clear with the above process then no worries you can check the below image which i have just created rough flow for your better reference hope this below image could help you out,

All these code should be extended in the class named as customresuestrategy class. You can see the below sample i have given below,


Best To Read: How To Create Observables In Angular 4

The getpath method is used to get the path of the route. The detached handle will have the stored information in the handle which is to be retrieved.
I have done reuse strategy for a single component. In same way you can also use this reuse strategy for multiple component. So write your custom logic to reuse the particular component wherever you need.

Hope you will find it helpful!, What more? give it a try and let us know your opinions. If you have any queries in resolving this then drop us a comment. We would definitely try to help you out and if you also like to read more tech blogs like me then never miss out anything from our blog works where you can read about all latest technologies & it’s updates which would be perfect for your 15 minutes tea break! What else guys hit the subscribe link and go crazy over learning.
If you are looking for angular developers ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via

The following two tabs change content below.

Preetha Ravi

A Young Junior Software Developer with 1 year of experience in Web Development arena. Holding well grounded experience in Angular, Ruby, Ruby On Rails.

Leave a Reply

Your email address will not be published. Required fields are marked *