Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chris Sworen
935
Mini Navigation Drawer content?
posted

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.

Parents
No Data
Reply
  • 2680
    Offline posted

    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

Children