What is the difference between MatSidenav and the MatDrawer?

From the documentation:

The sidenav components are designed to add side content to a fullscreen app.

VS

The drawer component is designed to add side content to a small section of your app.

^ Emphasis is mine

The difference between the two components is that the sidenav component should be used for a global drawer (like a navigation drawer) while the drawer component should be used for content specific to the small portion of your app (such as allowing the user to filter files).


Additionally:

They support almost all of the same features, but [drawers] do not support fixed positioning.

Looking at the source code, the sidenav components appear to all extend from the drawer components. Note specifically how the MatSidenav class has additional functionality for fixed positioning as mentioned above:

@Component({...})
export class MatSidenavContent extends MatDrawerContent {...}

@Component({...})
export class MatSidenav extends MatDrawer {
  /** Whether the sidenav is fixed in the viewport. */
  @Input()
  get fixedInViewport(): boolean {
    return this._fixedInViewport;
  }
  set fixedInViewport(value: BooleanInput) {
    this._fixedInViewport = coerceBooleanProperty(value);
  }
  private _fixedInViewport = false;

  /**
   * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
   * mode.
   */
  @Input()
  get fixedTopGap(): number {
    return this._fixedTopGap;
  }
  set fixedTopGap(value: NumberInput) {
    this._fixedTopGap = coerceNumberProperty(value);
  }
  private _fixedTopGap = 0;

  /**
   * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
   * fixed mode.
   */
  @Input()
  get fixedBottomGap(): number {
    return this._fixedBottomGap;
  }
  set fixedBottomGap(value: NumberInput) {
    this._fixedBottomGap = coerceNumberProperty(value);
  }
  private _fixedBottomGap = 0;
}

@Component({...})
export class MatSidenavContainer extends MatDrawerContainer {...}

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)