Hint text in tuiAsideItem calculated in wrong moment (Angular 19)

[mokeev1995]

Let's imagine we need to do some badge near title of tuiAsideItem (using Navigation components set) only in expanded state

So I placed the badge inside that tuiAsideItem and hide it with basic @if (expanded()) {}

Example

Template content

After that I got that sort of a hint on element in collapsed state:

So, as I discovered, this code executes exactly after the collapse was triggered, before @if (...) even rerendered.

How am I supposed to write that to solve the issue with wrong title in the hint?

Here's my package.json

package.json

{
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/cdk": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/platform-server": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@angular/ssr": "^19.0.6",
    "@ng-web-apis/universal": "^4.11.1",
    "@taiga-ui/addon-charts": "^4.19.0",
    "@taiga-ui/addon-commerce": "^4.19.0",
    "@taiga-ui/addon-table": "^4.19.0",
    "@taiga-ui/cdk": "^4.19.0",
    "@taiga-ui/core": "^4.19.0",
    "@taiga-ui/event-plugins": "^4.0.2",
    "@taiga-ui/icons": "^4.19.0",
    "@taiga-ui/kit": "^4.19.0",
    "@taiga-ui/layout": "^4.19.0",
    "eslint-plugin-unused-imports": "^4.1.4",
    "express": "^4.18.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.8.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.6",
    "@angular/cli": "^19.0.6",
    "@angular/compiler-cli": "^19.0.0",
    "@stylistic/eslint-plugin": "^2.12.1",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^22.10.2",
    "angular-eslint": "19.0.2",
    "eslint": "^9.16.0",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "8.18.0"
  }
}

TLDR: angular 19, taiga 4.19

Here's the repro: https://stackblitz.com/edit/angular-g3eos13a

[waterplea]

Might be an issue on our side, it should probably recalculate every time you hover

[mokeev1995]

FYI: It seems it works fine with angular 18, something has changed in 19 that brought us this new behavior

[waterplea]

Interesting. Can you file an issue mentioning that?

[mokeev1995]

Done #10111