Hello Chris,

Thank you for posting to Infragistics Community!

I have been looking into your question and prepared a small sample, based on the provided by you, with the Navigation Drawer Mini. The sample demonstrates a possible approach to implementing the listed requirements, however, please feel free to modify it, according to your preferences. I have attached it below.

To render content based on the current navigation item, a pretty straightforward solution would be declaring separate container elements with the help of the ngIf structural directive. These containers could host your custom components, or any content, such as a grid.

Regarding the content title being in line with the drawer button, the igxLayout directive with igxLayoutDir="row" direction could be set on the container element of the icon and title, for example a div. “row” is actually the default direction of the directive. Optionally, additional margin style could be added, to more precisely align the title and the button.

 <main igxLayout igxLayoutDir="column">
    <div igxLayout igxLayoutDir="row">
      <span igxButton="icon" igxToggleAction="navigation" >
        <igx-icon family="material">menu</igx-icon>
      </span>
      <p  style="margin: 3px 20px;">{{ selected }}</p>
    </div>
    <div *ngIf="selected === 'Controls'">
      <app-controls (enableGridNav)="onEnableGridNav($event)" (enableChartNav)="onEnableChartNav($event)" [gridNavEnabled]="gridEnabled" [chartNavEnabled]="chartEnabled"></app-controls>
    </div>
    <div *ngIf="selected === 'Data'">
      <igx-grid [data]="sampleData" height="450px" width="550px" [autoGenerate]="true"></igx-grid>
    </div>
    <div *ngIf="selected === 'Charts'">
      <app-charts></app-charts>
    </div>
  </main>

About the “Data” and “Chart” navigation items being enabled dynamically, one possible solution, as shown in the sample is to create a custom component, such as ControlsComponent to host the dropdown/buttons, etc. This component can have event emitters to subscribe to in order to enable the nav items, as well as Input properties to set their enabled state between switching the contents. Of course, there exist other possibilities, such as creating a global navigation service, however those can be considered as general Angular concepts, which are not specific to the IgniteUI for Angular library. I hope this helps point you to the right direction towards implementing your requirements.

Best regards,
Bozhidara Pachilova
Associate Software Developer

5557.nav-drawer-mini.zip

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.

Best regards,
Bozhidara Pachilova

I have modified the sample from before to demonstrate a conditionally rendered button for the “Grid” navigation item. The property that you bind the condition to, would depend on your application-level code, for instance, the sample checks whether the item’s text property is equal to “Data”.

You mention exporting a grid to Excel, however, I am not entirely sure about the connection to the query about conditionally showing a button. If you mean that the button on the navigation group header should export a grid within one of the item’s contents to Excel, I am afraid that this is indeed not feasible, as you are right that the grid would not exist unless navigated to its nav item’s contents.

Nevertheless, in case that is your requirement, maybe the Excel Exporter service could still be leveraged if you have a hold on the data on the click of the button.

In conclusion, please, check out the above referenced sample and let me know if I can assist you with anything else on the matter. 

Best regards,
Bozhidara Pachilova