How to use @material/drawer - 10 common examples

private initDrawer() {
        if (this.initialized) {
            this.destroyDrawer();
            if (this.hasNecessaryDom()) {
                this.createAdapter();
                let newFoundation = this.type === 'temporary' ?
                    new MDCTemporaryDrawerFoundation(this.mdcAdapter) :
                    new MDCPersistentDrawerFoundation(this.mdcAdapter);
                // first init, then assign to this.foundation, so that
                // this.openMem is used to detect the open state, instead
                // of the new foundation (which would never be opened otherwise):
                newFoundation.init();
                this.open = this.openMem;
                this.foundation = newFoundation;
            } else
                console.error('mdcDrawerContainer can\'t be constructed because of missing DOM elements');
        }
    }

private initDrawer() {
        if (this.initialized) {
            this.destroyDrawer();
            if (this.hasNecessaryDom()) {
                this.createAdapter();
                let newFoundation = this.type === 'temporary' ?
                    new MDCTemporaryDrawerFoundation(this.mdcAdapter) :
                    new MDCPersistentDrawerFoundation(this.mdcAdapter);
                // first init, then assign to this.foundation, so that
                // this.openMem is used to detect the open state, instead
                // of the new foundation (which would never be opened otherwise):
                newFoundation.init();
                this.open = this.openMem;
                this.foundation = newFoundation;
            } else
                console.error('mdcDrawerContainer can\'t be constructed because of missing DOM elements');
        }
    }

getDefaultFoundation() {
    this.drawer = this.root_.querySelector(
      MDCTemporaryDrawerFoundation.strings.DRAWER_SELECTOR
    )
    const {
      FOCUSABLE_ELEMENTS,
      OPACITY_VAR_NAME,
    } = MDCTemporaryDrawerFoundation.strings
    // prettier-ignore
    return new MDCTemporaryDrawerFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      hasClass: helper.hasClass('rootProps', this),
      addBodyClass: helper.addClass(document.body),
      removeBodyClass: helper.removeClass(document.body),
      hasNecessaryDom: () => Boolean(this.drawer),
      registerInteractionHandler: (evt, handler) =>
          this.root_.addEventListener(util.remapEvent(evt), handler, util.applyPassive()),
      deregisterInteractionHandler: (evt, handler) =>
          this.root_.removeEventListener(util.remapEvent(evt), handler, util.applyPassive()),
      registerDrawerInteractionHandler: (evt, handler) =>
          this.drawer.addEventListener(util.remapEvent(evt), handler),
      deregisterDrawerInteractionHandler: (evt, handler) =>
          this.drawer.removeEventListener(util.remapEvent(evt), handler),
      registerTransitionEndHandler: helper.registerHandler('drawerProps', this, 'transitionend'),
      deregisterTransitionEndHandler: helper.deregisterHandler('drawerProps', this, 'transitionend'),

getDefaultFoundation() {
    const { FOCUSABLE_ELEMENTS } = MDCPersistentDrawerFoundation.strings
    this.drawer = this.root_.querySelector(
      MDCPersistentDrawerFoundation.strings.DRAWER_SELECTOR
    )
    // prettier-ignore
    return new MDCPersistentDrawerFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      hasClass: helper.hasClass('rootProps', this),
      hasNecessaryDom: () => Boolean(this.drawer),
      registerInteractionHandler: (evt, handler) =>
          this.root_.addEventListener(util.remapEvent(evt), handler, util.applyPassive()),
      deregisterInteractionHandler: (evt, handler) =>
          this.root_.removeEventListener(util.remapEvent(evt), handler, util.applyPassive()),
      registerDrawerInteractionHandler: (evt, handler) =>
          this.drawer.addEventListener(util.remapEvent(evt), handler),
      deregisterDrawerInteractionHandler: (evt, handler) =>
          this.drawer.removeEventListener(util.remapEvent(evt), handler),
      registerTransitionEndHandler: helper.registerHandler('rootProps', this, 'transitionend'),
      deregisterTransitionEndHandler: helper.deregisterHandler('rootProps', this, 'transitionend'),
      registerDocumentKeydownHandler: helper.registerHandler(document, 'keydown'),
      deregisterDocumentKeydownHandler: helper.deregisterHandler(document, 'keydown'),

initFoundation = () => {
    const {dismissible, modal} = this.props;
    if (this.foundation_) {
      this.foundation_.destroy();
    }
    if (dismissible) {
      this.foundation_ = new MDCDismissibleDrawerFoundation(this.adapter);
      this.foundation_.init();
    } else if (modal) {
      this.initializeFocusTrap();
      this.foundation_ = new MDCModalDrawerFoundation(this.adapter);
      this.foundation_.init();
    }
  }

if (selectedItem) {
          selectedItem.focus();
        } else {
          const cdkInitialItem = this._platform.isBrowser ?
            document.querySelector(`[cdkFocusInitial]`) as HTMLElement : null;
          if (cdkInitialItem) {
            cdkInitialItem.focus();
          }
        }
      },
      notifyClose: () => this.closed.emit(),
      notifyOpen: () => this.opened.emit(),
      trapFocus: () => {},
      releaseFocus: () => this._releaseFocus()
    };
    return this.modal ? new MDCModalDrawerFoundation(adapter) : new MDCDismissibleDrawerFoundation(adapter);
  }

private initFoundation = () => {
    const {dismissible, modal} = this.props;
    if (this.foundation) {
      this.foundation.destroy();
    }
    if (dismissible) {
      this.foundation = new MDCDismissibleDrawerFoundation(this.adapter);
      this.foundation.init();
    } else if (modal) {
      this.initializeFocusTrap();
      this.foundation = new MDCModalDrawerFoundation(this.adapter);
      this.foundation.init();
    }
  };

initFoundation = () => {
    const {dismissible, modal} = this.props;
    if (this.foundation_) {
      this.foundation_.destroy();
    }
    if (dismissible) {
      this.foundation_ = new MDCDismissibleDrawerFoundation(this.adapter);
      this.foundation_.init();
    } else if (modal) {
      this.initializeFocusTrap();
      this.foundation_ = new MDCModalDrawerFoundation(this.adapter);
      this.foundation_.init();
    }
  }

private initFoundation = () => {
    const {dismissible, modal} = this.props;
    if (this.foundation) {
      this.foundation.destroy();
    }
    if (dismissible) {
      this.foundation = new MDCDismissibleDrawerFoundation(this.adapter);
      this.foundation.init();
    } else if (modal) {
      this.initializeFocusTrap();
      this.foundation = new MDCModalDrawerFoundation(this.adapter);
      this.foundation.init();
    }
  };

notifyClose: () => this.closed.emit(),
    isRtl: () => {
      return getComputedStyle(this.elementRef.nativeElement).getPropertyValue('direction') === 'rtl';
    },
    isDrawer: (el) => {
      return this.drawerNav ? el === this.drawerNav.elementRef.nativeElement : false;
    }
  };

  private _foundation: {
    init: Function,
    destroy: Function,
    open: Function,
    close: Function,
    isOpen: Function,
  } = new MDCTemporaryDrawerFoundation(this._mdcAdapter);

  constructor(
    public renderer: Renderer2,
    public elementRef: ElementRef,
    private _registry: EventRegistry) {
    super(renderer, elementRef);
  }

  ngOnChanges(changes: { [key: string]: SimpleChange }): void {
    if (changes['absolute']) {
      const absolute = 'ng-mdc-drawer--absolute';
      changes['absolute'].currentValue ? this._mdcAdapter.addClass(absolute) : this._mdcAdapter.removeClass(absolute);
    }
  }

  ngAfterViewInit(): void {