I'm using AG/IG 12.3.
I am attempting to work with the Navigation Drawer Mini example and finding it difficult to introduce content into the separate navigation panes (not wanting to use routing). I have started a basic example.
The first part is the control panel will have a large number of dropdowns and some combo boxes; data will have a data grid; and charts will have a tabbed set of charts (some instances will dynamically generate many vs a static 2 for others or none for some situations). I don't know how to generate any content based on the navigation because it doesn't work like the standard navigation drawer example and there are no other examples that actually show populating something based on navigation.
The second part is that I want the data & chart navigation to show up dynamically, based on whether a button was pushed in Controls or not.
I would prefer if the title of the content is inline with the navigation drawer button to save space, as we are processing a large amount of data.
I have a follow-up question. Is it possible to have a button appear conditionally in the drawer header?
Since the data grid is gated with a *ngIf statement, it doesn't exist unless it is the active object and that means users cannot download that grid to an Excel file unless they are actively on that drawer.
I have a good template for a button, I just need to know how to conditionally add it to the header of the "Data" drawer.
Hi Chris,
Thank you for following up!
I am glad that you find the suggested approach helpful.
Thank you for using Infragistics Components.
Best regards, Bozhidara Pachilova
Thank you, I appreciate the example in the versions I'm working with. I'm sure this will do the trick. I'll be sure to let you know if it's missing something (or if I am).
(update) Looks good! Thanks again for the prompt responses.
Hello Chris,
The previously attached project is only the locally downloaded and modified StackBlitz sample you have linked and which was targeting Angular and IgniteUI for Angular version 13. I am not sure what may be causing these errors on your side as on mine, no such issues arise, however it may be the node version or other factors. By the way, no breaking changes have been introduced for the nav-drawer between versions 12.3 and ^13.x, so the suggested approach should work with no modifications for your project as well.
Additionally, it seems the latest Angular Version 12 Release is v12.2.16 (and on npm as well). Nevertheless, for your convenience, I created this StackBlitz sample with IgniteUI for Angular 12.3 demonstrating the same approach as in the previous sample.
Please, check it out and let me know if I may be of any further assistance.
I'm sure this is a fine example, but for some reason I'm unable to run it on my system. I have done a "yarn install", "npm install", and "npm install --legacy-peer-deps" and raised the memory allocation as high as 36gb and it still throws JavaScript heap errors:
PS C:\Users\csworen\Downloads\5557.nav-drawer-mini\nav-drawer-mini> npm start > example-app@0.0.0 start > node --max_old_space_size=36240 node_modules/@angular/cli/bin/ng serve -o ⠦ Generating browser application bundles (phase: emitting)... <--- Last few GCs ---> [2988:00DA6C38] 34216 ms: Mark-sweep (reduce) 1061.8 (1223.8) -> 1047.7 (1172.8) MB, 1143.6 / 0.0 ms (average mu = 0.393, current mu = 0.000) last resort GC in old space requested [2988:00DA6C38] 35349 ms: Mark-sweep (reduce) 1047.7 (1172.8) -> 1047.6 (1160.8) MB, 1133.8 / 0.0 ms (average mu = 0.239, current mu = 0.000) last resort GC in old space requested <--- JS stacktrace ---> FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
I'm on Node v16.13.0, NPM v8.1.4, and my system has 48gb (23 + 16) of DDR4 memory.
Aside from that, I mentioned in my initial post that I am on 12.3 for both Angular and Infragistics. Would it be possible to get an example with that version? I don't have time to upgrade right now, with so many breaking updates.