How to use @material/tabs - 10 common examples

componentDidMount() {
    console.log(` 
                    _____      ___      _____
                    (   )     @   @     \\%%%/
                     |||       |||      \\%%%/
                     |||       |||       |||
                     |||       |||       |||
                     |||       |||       |||
                    (___)     (___)     (___)
                              Roma
   If you're checking out the console, maybe you want to contribute?
              Please do! https://github.com/TEIC/romajs
   `)

    this.props.clearUiData()
    const tabBar = new MDCTabBar(this.refs.tabs)
    tabBar.listen('MDCTabBar:change', ({detail: tabs}) => {
      this.updatePanel(tabs.activeTabIndex)
    })
    // Set start function to first option
    this.setState({selectedKnown: this.state.odds.urls[0]})
    this._updateCustomizationUrl()

    const select = new MDCSelect(this.refs.chooseodd)
    select.foundation_.setSelectedIndex(0)
    select.listen('MDCSelect:change', () => {
      const idx = this.state.odds.labels.indexOf(select.value)
      this.setState({selectedKnown: this.state.odds.urls[idx]})
      this._updateCustomizationUrl()
    })
  }

setStyleForIndicator: (propertyName: string, value: string) => this._rndr.setStyle(this._indicator, propertyName, value),
        getOffsetWidthForIndicator: () => this._indicator.offsetWidth,
        notifyChange: (evtData: {activeTabIndex: number}) => {
            this.tabChange.emit({tab: null, tabIndex: evtData.activeTabIndex});
        },
        getNumberOfTabs: () => this._tabs.length,
        isTabActiveAtIndex: (index: number) => index >= 0 ? this._tabs.toArray()[index]._active : false,
        setTabActiveAtIndex: (index: number, isActive = true) => this._tabs.toArray()[index]._active = isActive,
        isDefaultPreventedOnClickForTabAtIndex: (index: number) => !!this._tabs.toArray()[index]._foundation.preventsDefaultOnClick,
        setPreventDefaultOnClickForTabAtIndex: (index: number, preventDefaultOnClick: boolean) => this._tabs.toArray()[index]._foundation.setPreventDefaultOnClick(preventDefaultOnClick),
        measureTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.measureSelf(),
        getComputedWidthForTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.getComputedWidth(),
        getComputedLeftForTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.getComputedLeft()
    };
    private _subscriptions: Subscription[];
    private _foundation = new MDCTabBarFoundation(this._adapter);

    constructor(private _rndr: Renderer2, public _el: ElementRef, private registry: MdcEventRegistry) {
    }

    ngAfterContentInit() {
        this._tabs.changes.subscribe(() => {
            if (this._subscriptions)
                // make sure we update the tab change event subscriptions:
                this._listenTabSelected();
        });
        this.addIndicator();
        this._foundation.init();
    }

    ngOnDestroy() {
        this._foundation.destroy();

measureTabAtIndex: (index: number) => this.tabs.toArray()[index].measureSelf(),
    getComputedWidthForTabAtIndex: (index: number) => {
      return this.tabs.length ? this.tabs.toArray()[index].getComputedWidth() : -1;
    },
    getComputedLeftForTabAtIndex: (index: number) => {
      return this.tabs.length ? this.tabs.toArray()[index].getComputedLeft() : -1;
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    layout(): void,
    switchToTabAtIndex(index: number, shouldNotify: boolean): void,
    getActiveTabIndex(): number
  } = new MDCTabBarFoundation(this._mdcAdapter);

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

  ngAfterContentInit(): void {
    // Subscribe to changes in the amount of tabs, in order to be
    // able to re-render the content as new tabs are added or removed.
    this.tabs.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
      this._foundation.init();

      this._initializeSelection();
      this.setDisableRipple(this.disableRipple);

getDefaultFoundation() {
    this.tabSelectedHandler_ = ({ detail }) => {
      const { tab } = detail
      const indexOfTab = this.tabs.indexOf(tab)
      if (indexOfTab < 0) {
        throw new Error(
          "Invalid tab component given as activeTab: Tab not found within this component's tab list"
        )
      }
      this.foundation_.switchToTabAtIndex(indexOfTab, true)
    }

    // prettier-ignore
    return new MDCTabBarFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      bindOnMDCTabSelectedEvent: helper.registerHandler('tabProps', this,  MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: helper.deregisterHandler('tabProps', this, MDCTabFoundation.strings.SELECTED_EVENT),
      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => {
        this.props.onChange_({detail: evtData})
        this.props.onChange(evtData)
      },
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {

getDefaultFoundation() {
    // prettier-ignore
    return new MDCTabFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      registerInteractionHandler: helper.registerHandler('rootProps', this),
      deregisterInteractionHandler: helper.registerHandler('rootProps', this),
      getOffsetWidth: () => this.root_.offsetWidth,
      getOffsetLeft: () => this.root_.offsetLeft,
      notifySelected: () => {
        const tab = this
        this.props.onSelected_({detail: {tab}})
        this.props.onSelected(tab)
      }
    })
  }

this.tabSelectedHandler_ = ({ detail }) => {
      const { tab } = detail
      const indexOfTab = this.tabs.indexOf(tab)
      if (indexOfTab < 0) {
        throw new Error(
          "Invalid tab component given as activeTab: Tab not found within this component's tab list"
        )
      }
      this.foundation_.switchToTabAtIndex(indexOfTab, true)
    }

    // prettier-ignore
    return new MDCTabBarFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      bindOnMDCTabSelectedEvent: helper.registerHandler('tabProps', this,  MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: helper.deregisterHandler('tabProps', this, MDCTabFoundation.strings.SELECTED_EVENT),
      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => {
        this.props.onChange_({detail: evtData})
        this.props.onChange(evtData)
      },
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {
        this.tabs[index].isActive = isActive
      },
      isDefaultPreventedOnClickForTabAtIndex: (index) => this.tabs[index].preventDefaultOnClick,

const { tab } = detail
      const indexOfTab = this.tabs.indexOf(tab)
      if (indexOfTab < 0) {
        throw new Error(
          "Invalid tab component given as activeTab: Tab not found within this component's tab list"
        )
      }
      this.foundation_.switchToTabAtIndex(indexOfTab, true)
    }

    // prettier-ignore
    return new MDCTabBarFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      bindOnMDCTabSelectedEvent: helper.registerHandler('tabProps', this,  MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: helper.deregisterHandler('tabProps', this, MDCTabFoundation.strings.SELECTED_EVENT),
      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => {
        this.props.onChange_({detail: evtData})
        this.props.onChange(evtData)
      },
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {
        this.tabs[index].isActive = isActive
      },
      isDefaultPreventedOnClickForTabAtIndex: (index) => this.tabs[index].preventDefaultOnClick,
      setPreventDefaultOnClickForTabAtIndex: (index, preventDefaultOnClick) => {

autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCRipple', ripple.MDCRipple);
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,

autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCRipple', ripple.MDCRipple);
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,

getDefaultFoundation() {
    return new MDCTabBarFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      bindOnMDCTabSelectedEvent: () => this.listen(
        MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: () => this.unlisten(
        MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      registerResizeHandler: (handler) => this.$window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => this.$window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => this.emit(MDCTabBarFoundation.strings.CHANGE_EVENT, evtData),
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index] && this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {
        if (this.tabs[index]) {