How to use @material/toolbar - 10 common examples

setStyle: (property: string, value: number) => {
            this.renderer.setStyle(this.root.nativeElement, property, value);
        },
        setStyleForTitleElement: (property: string, value: number) => {
            if (this._title)
                this.renderer.setStyle(this._title._elm.nativeElement, property, value);
        },
        setStyleForFlexibleRowElement: (property: string, value: number) => {
            this.renderer.setStyle(this._firstRow._elm.nativeElement, property, value);
        },
        setStyleForFixedAdjustElement: (property: string, value: number) => {
            if (this.fixedAdjust)
                this.renderer.setStyle(this.fixedAdjust._elm.nativeElement, property, value);
        }
    };
    private foundation: { init: Function, destroy: Function } = new MDCToolbarFoundation(this.mdcAdapter);

    constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry,
        private zone: NgZone) {
    }

    ngAfterViewInit() {
        // Using ngAfterViewInit instead of ngAfterContentInit, because the MDCToolbarFoundation.init
        // uses MdcToolbarAdapter.hasClass on classes that we bind in this component. Those classes are only
        // available after the view is fully initialized.
        // TODO: in other components we just check the property value instead of the class (property based on
        //   the classname given to the adapter), so that ngAfterContentInit can be used after all. That
        //   seems a nicer strategy.
        this._initialized = true;
        this.initFixedScroll();
        this.foundation.init();
    }

getDefaultFoundation() {
    this.firstRowElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.FIRST_ROW_SELECTOR
    )
    this.titleElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.TITLE_SELECTOR
    )
    // fix for demo
    const window_ = this.context.window || window
    // prettier-ignore
    return new MDCToolbarFoundation({
      hasClass: helper.hasClass('rootProps', this),
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      registerScrollHandler: (handler) => window_.addEventListener('scroll', handler, util.applyPassive()),
      deregisterScrollHandler: (handler) => window_.removeEventListener('scroll', handler, util.applyPassive()),
      registerResizeHandler: (handler) => window_.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window_.removeEventListener('resize', handler),
      getViewportWidth: () => window_.innerWidth,
      getViewportScrollY: () => window_.pageYOffset,
      getOffsetHeight: () => this.root_.offsetHeight,
      getFirstRowElementOffsetHeight: () => this.firstRowElement_.offsetHeight,
      notifyChange: () => {
        this.props.onChange_()
        this.props.onChange()
      },
      setStyle: (property, value) => this.root_.style.setProperty(property, value),

getDefaultFoundation() {
    this.firstRowElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.FIRST_ROW_SELECTOR
    )
    this.titleElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.TITLE_SELECTOR
    )
    // fix for demo
    const window_ = this.context.window || window
    // prettier-ignore
    return new MDCToolbarFoundation({
      hasClass: helper.hasClass('rootProps', this),
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      registerScrollHandler: (handler) => window_.addEventListener('scroll', handler, util.applyPassive()),
      deregisterScrollHandler: (handler) => window_.removeEventListener('scroll', handler, util.applyPassive()),
      registerResizeHandler: (handler) => window_.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window_.removeEventListener('resize', handler),
      getViewportWidth: () => window_.innerWidth,
      getViewportScrollY: () => window_.pageYOffset,
      getOffsetHeight: () => this.root_.offsetHeight,
      getFirstRowElementOffsetHeight: () => this.firstRowElement_.offsetHeight,

getDefaultFoundation() {
    this.firstRowElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.FIRST_ROW_SELECTOR
    )
    this.titleElement_ = this.root_.querySelector(
      MDCToolbarFoundation.strings.TITLE_SELECTOR
    )
    // fix for demo
    const window_ = this.context.window || window
    // prettier-ignore
    return new MDCToolbarFoundation({
      hasClass: helper.hasClass('rootProps', this),
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      registerScrollHandler: (handler) => window_.addEventListener('scroll', handler, util.applyPassive()),
      deregisterScrollHandler: (handler) => window_.removeEventListener('scroll', handler, util.applyPassive()),
      registerResizeHandler: (handler) => window_.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window_.removeEventListener('resize', handler),
      getViewportWidth: () => window_.innerWidth,

autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
autoInit.register('MDCTab_', tab.MDCTab);
autoInit.register('MDCTabIndicator', tabIndicator.MDCTabIndicator);
autoInit.register('MDCTab', tabs.MDCTab);
autoInit.register('MDCTabBar', tabs.MDCTabBar);
autoInit.register('MDCTextField', textField.MDCTextField);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);

// Export all components.
export {
  autoInit,
  base,
  checkbox,
  chips,
  dialog,
  drawer,
  floatingLabel,
  formField,
  gridList,
  iconToggle,
  lineRipple,
  linearProgress,

},
    setStyleForFixedAdjustElement: (property: string, value: string) => {
      if (!isBrowser()) { return; }

      if (this.adjustBodyMargin && this.fixed) {
        this._renderer.setStyle(this._fixedAdjustElement ?
          this._fixedAdjustElement : document.body, property, value);
      }
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    updateAdjustElementStyles(): void
  } = new MDCToolbarFoundation(this._mdcAdapter);

  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _renderer: Renderer2,
    public elementRef: ElementRef,
    private _registry: EventRegistry) { }

  ngOnChanges(changes: { [key: string]: SimpleChange }): void {
    const fixedAdjustElement = changes['fixedAdjustElement'];

    if (fixedAdjustElement) {
      if (fixedAdjustElement.currentValue) {
        this._renderer.addClass(fixedAdjustElement.currentValue, 'mdc-toolbar-fixed-adjust');
      }
      if (fixedAdjustElement.previousValue) {
        this._renderer.removeClass(fixedAdjustElement.previousValue, 'mdc-toolbar-fixed-adjust');

public componentDidMount() {
    super.componentDidMount();
    if (this.control) {
      this.MDComponent = new MDCToolbar(this.control);
      this.MDComponent.listen('MDCToolbar:change', this.onChange);
    }
  }

componentDidMount() {
    this.MDComponent = new MDCToolbar(this.control);
    this.MDComponent.listen('MDCToolbar:change', this._onChange);
  }
  componentWillUnmount() {

mounted() {
        this.mdcToolbar = new MDCToolbar(this.$el)
    },
    destroyed() {

componentDidMount() {
    this.MDComponent = new _toolbar.MDCToolbar(this.control);
    this.MDComponent.listen('MDCToolbar:change', this._onChange);
  }