Function ngAfterContentInit

src/material/tabs/paginated-tab-header.ts:206–269

()

  }

  ngAfterContentInit() {
    const dirChange = this._dir ? this._dir.change : observableOf('ltr');
    // We need to debounce resize events because the alignment logic is expensive.
    // If someone animates the width of tabs, we don't want to realign on every animation frame.
    // Once we haven't seen any more resize events in the last 32ms (~2 animaion frames) we can
    // re-align.
    const resize = this._sharedResizeObserver
      .observe(this._elementRef.nativeElement)
      .pipe(debounceTime(32), takeUntil(this._destroyed));
    // Note: We do not actually need to watch these events for proper functioning of the tabs,
    // the resize events above should capture any viewport resize that we care about. However,
    // removing this is fairly breaking for screenshot tests, so we're leaving it here for now.
    const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed));

    const realign = () => {
      this.updatePagination();
      this._alignInkBarToSelectedTab();
    };

    this._keyManager = new FocusKeyManager<MatPaginatedTabHeaderItem>(this._items)
      .withHorizontalOrientation(this._getLayoutDirection())
      .withHomeAndEnd()
      .withWrap()
      // Allow focus to land on disabled tabs, as per https://w3c.github.io/aria-practices/#kbd_disabled_controls
      .skipPredicate(() => false);

    // Fall back to the first link as being active if there isn't a selected one.
    // This is relevant primarily for the tab nav bar.
    this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0));

    // Note: We do not need to realign after the first render for proper functioning of the tabs
    // the resize events above should fire when we first start observing the element. However,
    // removing this is fairly breaking for screenshot tests, so we're leaving it here for now.
    afterNextRender(realign, {injector: this._injector});

    // On dir change or resize, realign the ink bar and update the orientation of
    // the key manager if the direction has changed.
    merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized())
      .pipe(takeUntil(this._destroyed))
      .subscribe(() => {
        // We need to defer this to give the browser some time to recalculate
        // the element dimensions. The call has to be wrapped in `NgZone.run`,
        // because the viewport change handler runs outside of Angular.
        this._ngZone.run(() => {
          Promise.resolve().then(() => {
            // Clamp the scroll distance, because it can change with the number of tabs.
            this._scrollDistance = Math.max(
              0,
              Math.min(this._getMaxScrollDistance(), this._scrollDistance),
            );
            realign();
          });
        });
        this._keyManager?.withHorizontalOrientation(this._getLayoutDirection());
      });

    // If there is a change in the focus key manager we need to emit the `indexFocused`
    // event in order to provide a public event that notifies about focus changes. Also we realign