Angular Material Tabs - New added tab is half hidden

I am setting the tab title after the tab has been added. And because of that, half of the tab is not on the screen. Is there a way to realign the tabs again?

stackblitz code here

-- Edit https://github.com/angular/components/issues/17853, seems this is an issue.

This is caused by this statement:

setTimeout(() => {
    this.tabs[this.tabs.length - 1] += " - Added title"
}, 2000)

You are changing the new added tab's header after 2 seconds of render.

That's why the new tab title is not showing properly.

So, if you really want to change the tab's title, then change it when you are assigning the title. E.g: this.tabs.push('New - Added title');

Remove the timeout.

Edit: (an workaround)

Why don't you select that tab after timeout?

addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    setTimeout(() => {
      this.tabs[this.tabs.length - 1] += " - Added title"
      if (selectAfterAdding) {
        this.selected.setValue(this.tabs.length - 1);
      }
    }, 2000)
  }