Dynamic tabs with routing | Infragistics Forums

935

Dynamic tabs with routing

Chris Sworen posted over 3 years ago

I am using Angular 11 and latest IG (Dec 2020 release), as I am on a brand new Ignite UI license.

I am unsure how to go about dynamically creating a tab, with a routerlink to another component (with parameter).

Example:

Tab:Scenarios (list of scenarios with header info)

User clicks "Manage" in unbound "Actions" column, should:

Create a tab with scenario.name as tab.title and navigate to /details/<scenario.id>
Scenario List should not reload when navigated back to, unless header info changed in /details
Button to delete /details tab removes from tab bar and navigates user back to most previously active tab

Top Replies

2680

Offline Bozhidara Pachilova posted over 3 years ago +1
Hello Chris, Thank you for reaching out. As I understand from your description, your requirement on a high level is to initially have...view reply »
935

Offline Chris Sworen posted over 3 years ago in reply to Bozhidara Pachilova +1
Thank you for responding with a sample. I see 2 limitations right off, and not sure if you are equipped to address them. The simple structure of the...view reply »
2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Chris Sworen +1 verified
Hello Chris, Thank you for following up. I have extended the previous sample to further replicate some of your requirements. You can find...view reply »

2680

Verified Answer
Offline Bozhidara Pachilova posted over 3 years ago in reply to Chris Sworen

Hello Chris,

Thank you for following up.

I have extended the previous sample to further replicate some of your requirements. You can find the modified sample here.

To start with, there is a “details” route defined now that uses a path with an id parameter and the newly created tabs point to a DetailsComponent, which can display information about a data item with the corresponding id, extracted from the route parameters. As mentioned, this approach is a standard routing scenario, however, to address the first sub-point of your questions, the exact links, paths, and structures can be defined on application-level. Having said this, the sample also does not aim to replicate any application-specific logic or data models, therefore, as I am not familiar with your custom Classes, the sample cannot account for them. While custom application scenarios can be considered out of the scope of Infragistics developer support, if you would like me to assist you with something specific, I would suggest forking the Stackblitz sample, modifying it with any relevant code, and sending it back to me.

Regarding the tabs not reloading requirement, I understand this use-case and the need to keep the information between switching tabs. For this case, the Angular Route Reuse Strategy comes in the picture. To start with, a BaseRouteReuseStrategy is provided by the framework when the matched router configs are identical. Meaning, if you are switching between tabs with links “details/1” and “details/2” their target component will not be re-initialized. If, however, the switch is between the “/firstPage” and “details/1” – the latter component will be reloaded (you could check this by logging something in the ngOnInit, when switching between different paths).

Fortunately, Angular provides an abstract RouteReuseStrategy class, which can be implemented to provide a way to customize when activated routes get reused. I believe you will find these links on the topic useful as well: Angular Route Reuse Strategy Article, Small Stackblitz demo as provided in this StackOverflow thread.

To further demonstrate such a Custom RouteReuseStrategy, in the modified sample the initial tab’s route is “/firstPage” and the generated tabs’ routes are in the format “details/:id”. The tabs also host some input elements, where you can write and see the input value immediately displayed, as well an IgxGridComponent. As you can observe, if you modify the inputs’ values or some cell in the grid, on tab-switching between the “/firstPage” and “details/:id” the entered values are not refreshed, meaning the route’s target component’s content has not been re-initialized.

If it comes to preserving some more complicated nested components’ or data structures' state, this would have to be handled on application-level and would be out of the scope of this support case.

Please, test the suggested sample on your side and let me know if I can help with anything else.

Best regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Reject Answer

Cancel
935

Offline Chris Sworen posted over 3 years ago in reply to Bozhidara Pachilova
Thank you for responding with a sample. I see 2 limitations right off, and not sure if you are equipped to address them.

The simple structure of the tabs being added doesn't account for everything I believe I require:

RouterLink/#identifier/routerLinkActive/isSelected

Class (as I'm using a custom class combination for my look)

There is no structure in place that I recognize for caching data so the tabs aren't reloaded once navigated back to.

If the first is able to be properly covered, please give an example, as I'm expecting I should have to include my static links in the structure created/housed by the TabService.

For the second, I've been doing some research into how this may be accomplished, but I'm still somewhat newly returned to Angular and haven't attempted this before, so not sure if I'm seeing what I'm looking for, if you take my meaning. It's imperative the tabs not be reloaded upon navigating back for many reasons. I would greatly appreciate a sample for that, too.

I have a suggestion for mapping out the functionality I'm looking for. The static tab could load currency conversions with clickable links/buttons that open new components (parameterized routing) with the country's name and amount. The currency conversions are accomplished in a simple way in this video, which I have used for other ramp-up on Angular functionality.

I will begin integrating the service and attempting to scope out the necessary properties for my tabs as I await your reply.
Cancel
Reply

Cancel
2680

Offline Bozhidara Pachilova posted over 3 years ago

Hello Chris,

Thank you for reaching out.

As I understand from your description, your requirement on a high level is to initially have, let us say one tab that hosts a component, which provides the functionality to select and include other tabs – for example by name, which will be added to the parent tabs component. Please, correct me if there is a misunderstanding.

To start with, I believe you will find this section of the Ignite UI for Angular documentation about Integration with Router Outlet Container for the Tabs component very helpful.

In an effort to replicate such a setup, I prepared this sample, which demonstrates routing and dynamically adding tabs. As you can observe, initially there is a single “Tab 1” present. Its corresponding component is “View1Component” and it hosts an IgxCombo with two options for tabs, that can be selected. There are also buttons, upon the clicking of which the selected tabs get added to/deleted from the parent tabs component. For the sake of simplicity, the sample is not focusing on the data representation and the tabs’ object consists of simple “name” and “id” string fields. So, since the “View1Component” is a child of the parent component, where the IgxTabs is placed and furthermore is accessed by routerLink and not a static tag, in order to implement the communication between the components, we need a service. In this case this is the “TabsService”, which consists of addedTabs and deletedTabs Subjects and public addTabs$ and deleteTabs$ Observables. The subjects emit an array of selected tab ids from within the “addTabs”/”deleteTabs” functions, when the “Generate”/”Delete” buttons in the child component are clicked. From the parent component, we can subscribe to the service’s’ add/deletetabs$ observable and push newly created tab objects to the tabs array or slice them from it.

Regarding your updated requirements about implementing “details” component, and showing information about particular objects, based on a route’s parameter, my suggestion is to check out the official Angular documentation topic about In-app navigation topic here, where similar examples are provided.

I hope that the sample will get you up and running with the implementation of further more complex application-level scenarios. Please, test it on your side and in case of any other questions about it, do not hesitate to address them.

Best regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel