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:
Thank you for responding with a sample. I see 2 limitations right off, and not sure if you are equipped to address them.
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.
I'm having an issue with implementation as specified in the example:
Error: src/app/components/nav/nav.component.ts:24:38 - error TS7053: Element implicitly has an 'any' type because expression of type '"url"' can't be used to index type 'Event'. Property 'url' does not exist on type 'Event'. 24 .subscribe(args => this.path = args['url']); //console.log(args));
The error occurs in the following snippet (you provided):
this.router.events .pipe(filter(e => e instanceof NavigationEnd)) .subscribe(args => this.path = args['url']); //console.log(args));
As you can see, I've tested with a console.log and confirmed the attribute "url" exists. How do I remove this error?
EDIT:
After some (strange) search results and some obscure search terms, I found a solution that actually works in my case (no idea why original didn't work for me):
this.router.events .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd)) .subscribe(args => this.path = args.url);
I tried a lot of different variations before I found this one that actually works. Just have to designate that 'e' is a NavigationEnd object to get the "url" attribute from it.
Hello Chris,
Thank you for your patience.
As to create this sample, as a base I used the sample from the Integration With Router Outlet Container section of the topic about the IgxTabsComponent in our documentation, this code’s purpose is to simply output the current url we are on for demo purposes. In case you do not need this in your application, please feel free to remove this code.
Anyways, I am glad that you were able to overcome the error you were facing and thank you for sharing the solution with our community!
Best regards,Bozhidara PachilovaAssociate Software Developer
I can't figure out (from the example) how to specify the route/:id of the newly created tab.
If you altered the example so that the routing was happening on tabs-sample-4.component and populating details.component (with that close tab button populating on the same), it would put me in a much better state for it.
I'm not seeing anything in the API defining an igx-tab-item with anything more than a "disabled" property and an "active" accessor. I'm trying to figure out how to programmatically construct the tabs with the data that I need in it.
As I understand you have implemented some of the suggested approaches from the sample, such as the “closed” and “opened” services. Also, I would rather say that the fact that the tab opening buttons are positioned within a grid might not really be related to the matter in question.
Regarding not being able to open a tab, I am not sure what the issue is since I do not have your entire code. Also, please keep in mind that it will be difficult for us to account for any application requirements, as it is hard to get the bigger picture, without having a detailed and clear specification. Nevertheless, the latter would also be out of the scope of this thread. As a last resort option, I would like to ask you to please send an isolated sample, demonstrating your current issue, so I can investigate it, without making any possibly false assumptions about the implementation.
Lastly, the sample illustrates a simple tab object representation and an example approach with services, whose purpose is to communicate the tabs objects in use between different components, as per your description in the prior queries. All this logic is not really related to the IgxTabsComponent and IgxTabItemComponent as they are simply used to bind to the available in the component tab objects and represent them in the UI as tabs with a corresponding content. In this line of thought, I am not sure in what way the issues you are currently facing are related to the IgxTabsComponent, unless there is some error with the binding to the dynamically generated tabs objects. Then again, this would be an assumption on my side since I do not have the complete information and the issue does not seem to occur in the suggested sample.
Thank you for your cooperation.
Best regards,Bozhidara Pachilova
Teodosia,
I disagree. You may not be aware, but IG overwrites a lot of core Angular functionality (I was unable to use Angular tabs or modal dialogs and required IG assistance to get to what is currently working for me) and I have, as yet, been unable to resolve this utilizing the referenced material.
At present, I can see that the tab is being created somewhere, but it doesn't populate in the igx-tabs as an igx-tab-item, and therefore, am unable to navigate to the scenario-details component.
My nav component contains the subscriptions to the openSubs and closeSubs subscriptions and is tracking router events as specified in the example's tabs-sample-4-component. There's also references to the globally-located tabs object list.
My scenarios list component contains the openNewTab function with designations of the scenario name as buttons within an unbound column in that grid. You can refer to query #541090 for references with which Bozhidara has already assisted.
I have altered my Tabs service as below, in order to publish the scenario name as the header for the new tabs:
import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { tab } from '../models/tab'; @Injectable({ providedIn: 'root' }) export class TabsService { private openedTabs: Subject<tab>; private closedTab: Subject<tab>; public openTab$: Observable<tab>; public closeTab$: Observable<tab>; public curOpenedTabIds: string[] = []; constructor() { this.openedTabs = new Subject<tab>(); this.closedTab = new Subject<tab>(); this.openTab$ = this.openedTabs.asObservable(); this.closeTab$ = this.closedTab.asObservable(); } public openTab(tabId:string, tabName:string) { this.curOpenedTabIds.push(tabId); this.openedTabs.next({id:tabId, name:tabName}); } public closeTab(tabId:string, tabName:string) { let tabIndexHere = this.curOpenedTabIds.findIndex(tabID => tabID === tabId); this.curOpenedTabIds.splice(tabIndexHere, 1); this.closedTab.next({id:tabId, name:tabName}); } }
As I am unable to produce a working, clickable tab, I have not implemented the closeTab functionality on the scenario-details component, yet.
Kindly investigate and let me know what I'm doing wrong in this case.
Thanks.
Hello,
Since Bozhidara is out of the office until Monday, I have been looking into your questions. In order to create new tabs, my suggestion is to try adding a new object into the TABS collection and later open it in some interaction or directly to that tabs collection which would render it into the visible tabs directly. In both cases, you could set its name and id using the defined Tab interface.
Regarding the rest of your questions, what I could say is that routing is not part of igniteui-angular library and it should be implemented on application level, which is beyond the scope of Infragistics support. Bozhidara's sample is a simple demonstration of how similar to the required behavior could be achieved and also she shared a lot of resources that you might consider helpful.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Does the replicated component have to be a child route of the home/blank route?
Also, how would I pass an ID and a Name to the tab to be created, since they won't be statically declared, as in your example?
My assumption was that I could reserve the parent/child interaction for the replicated component and its correlative components. In my case, the scenario-details component would be at the same level as the nav (holds and exposes the tabs) and the scenarios (list of scenarios to navigate to details from) with children being of scenario-details since it will hold its own nav bar: change history, report, data viewer, data list manipulation. There is a change history at the app level, as well (with a parameter of "none" vs scenario ID at the scenario-details level).
Does this structure make sense and is it logically sound? I will be testing that today (as I have time to accomplish) from your most recent example. Please let me know if there is anything wrong in my logic that I may fix with your guidance on Monday.