Class IgxNavigationDrawerComponent

Ignite UI for Angular Navigation Drawer - Documentation

The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar.

Example:

<igx-nav-drawer id="navigation" [isOpen]="true">
  <ng-template igxDrawer>
    <nav>
      <span igxDrawerItem [isHeader]="true">Email</span>
      <span igxDrawerItem igxRipple>Inbox</span>
      <span igxDrawerItem igxRipple>Deleted</span>
      <span igxDrawerItem igxRipple>Sent</span>
    </nav>
  </ng-template>
</igx-nav-drawer>

Hierarchy

  • IgxNavigationDrawerComponent

Implements

  • IToggleView
  • OnInit
  • AfterContentInit
  • OnDestroy
  • OnChanges

Constructors

constructor

Properties

closed

closed: EventEmitter<Object> = new EventEmitter()

Event fired when the Navigation Drawer has closed.

<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>

closing

closing: EventEmitter<Object> = new EventEmitter()

Event fired as the Navigation Drawer is about to close.

<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>

cssClass

cssClass: string = "igx-nav-drawer"

enableGestures

enableGestures: boolean = true

Enables the use of touch gestures to manipulate the drawer:

  • swipe/pan from edge to open, swipe-toggle and pan-drag.
// get
let gesturesEnabled = this.navdrawer.enableGestures;
<!--set-->
<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>

id

id: string = `igx-nav-drawer-${NEXT_ID++}`

ID of the component

// get
let myNavDrawerId = this.navdrawer.id;
<!--set-->
 <igx-nav-drawer id='navdrawer'></igx-nav-drawer>

isOpen

isOpen: boolean = false

State of the drawer.

// get
let navDrawerIsOpen = this.navdrawer.isOpen;
<!--set-->
<igx-nav-drawer [isOpen]='false'></igx-nav-drawer>

miniWidth

miniWidth: string = "60px"

Width of the drawer in its mini state. Defaults to 60px.

// get
let navDrawerMiniWidth = this.navdrawer.miniWidth;
<!--set-->
<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>

opened

opened: EventEmitter<Object> = new EventEmitter()

Event fired when the Navigation Drawer has opened.

<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>

opening

opening: EventEmitter<Object> = new EventEmitter()

Event fired as the Navigation Drawer is about to open.

 <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>

pin

pin: boolean = false

When pinned the drawer is relatively positioned instead of sitting above content. May require additional layout styling.

// get
let navDrawerIsPinned = this.navdrawer.pin;
<!--set-->
<igx-nav-drawer [pin]='false'></igx-nav-drawer>

pinChange

pinChange: EventEmitter<boolean> = new EventEmitter<boolean>(true)

Pinned state change output for two-way binding.

<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>

pinThreshold

pinThreshold: number = 1024

Minimum device width required for automatic pin to be toggled. Default is 1024, can be set to a falsy value to disable this behavior.

// get
let navDrawerPinTreshold = this.navdrawer.pinThreshold;
<!--set-->
<igx-nav-drawer [pinTreshold]='1024'></igx-nav-drawer>

position

position: string = "left"

Position of the Navigation Drawer. Can be "left"(default) or "right".

// get
let myNavDrawerPosition = this.navdrawer.position;
<!--set-->
<igx-nav-drawer [position]="'left'"></igx-nav-drawer>

width

width: string = "280px"

Width of the drawer in its open state. Defaults to "280px".

// get
let navDrawerWidth = this.navdrawer.width;
<!--set-->
<igx-nav-drawer [width]="'228px'"></igx-nav-drawer>

Methods

close

  • close(): void

open

  • open(): void

toggle

  • toggle(): void