Android only: Broken GridLayout with angular 17.3.0. With 17.2.1 thing were working

OS: macOS 14.4
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 20.11.1
npm: 10.2.4
nativescript: 8.6.5

# android
java: 11.0.22
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 15.3/15E204a
cocoapods: 1.15.2
python: 3.12.2
python3: 3.12.2
ruby: 2.7.8
platforms: 
  - DriverKit 23.4
  - iOS 17.4
  - macOS 14.4
  - tvOS 17.4
  - visionOS 1.1
  - watchOS 10.4

Dependencies

"dependencies": {
  "@angular/animations": "17.3.0",
  "@angular/common": "17.3.0",
  "@angular/compiler": "17.3.0",
  "@angular/core": "17.3.0",
  "@angular/forms": "17.3.0",
  "@angular/platform-browser": "17.3.0",
  "@angular/platform-browser-dynamic": "17.3.0",
  "@angular/router": "17.3.0",
  "@apollo/client": "3.9.7",
  "@mnd/external-web-view": "file:../app-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.1.tgz",
  "@nativescript/angular": "17.0.0",
  "@nativescript/core": "8.6.2",
  "@nativescript/iqkeyboardmanager": "2.1.1",
  "@nativescript/localize": "5.2.0",
  "@nativescript/mlkit-barcode-scanning": "2.1.0",
  "@nativescript/mlkit-core": "2.1.0",
  "@nativescript/secure-storage": "3.0.3",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "6.0.0",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.8.1",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.30.1",
  "nativescript-health-data": "file:../app-plugins-customized/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../app-plugins-customized/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.3.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-sqlite-commercial": "file:../app-plugins-customized/commercial-sqlite/nativescript-sqlite-commercial-1.8.0.tgz",
  "nativescript-sqlite-encrypted": "file:../app-plugins-customized/commercial-sqlite/nativescript-sqlite-encrypted-1.6.0.tgz",
  "nativescript-ui-calendar": "15.2.3",
  "nativescript-ui-gauge": "15.2.3",
  "qs": "npm:querystring@0.2.1",
  "rxjs": "7.8.1",
  "util": "0.12.5",
  "uuidjs": "5.0.1",
  "zone.js": "0.14.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "17.3.0",
  "@angular/compiler-cli": "17.3.0",
  "@graphql-codegen/cli": "5.0.2",
  "@graphql-codegen/fragment-matcher": "5.0.2",
  "@graphql-codegen/introspection": "4.0.3",
  "@graphql-codegen/typescript": "4.0.6",
  "@graphql-codegen/typescript-apollo-angular": "4.0.0",
  "@graphql-codegen/typescript-operations": "4.2.0",
  "@nativescript/android": "8.6.2",
  "@nativescript/ios": "8.6.4",
  "@nativescript/types": "8.6.1",
  "@nativescript/webpack": "5.0.18",
  "@ngtools/webpack": "17.3.0",
  "@types/d3-ease": "3.0.2",
  "@types/intl": "1.2.2",
  "@types/lodash": "4.17.0",
  "@types/node": "20.11.28",
  "keycloak-request-token": "0.1.0",
  "rimraf": "5.0.5",
  "sass": "1.72.0",
  "ts-node": "10.9.2",
  "typescript": "5.2.2"
}

Describe the bug
I am having a grid layout showing tiles see images attached, those are set up using the following code snipped

<GridLayout #idBaseGridLayout class="mnd" iosOverflowSafeArea="true" [paddingBottom]="BOTTOM_BAR_HEIGHT" [marginLeft]="_isTablet ? '60' : '0' ">
  <GridLayout #idInnerGridLayout col="0" row="0" ios:columns="*,10,*" ios:rows="*,10,*,10,*"
    android:columns="{{(_tinyScreen || _smallScreen) ? '*,5,*' : '*,10,*'}}" android:rows="{{(_tinyScreen || _smallScreen) ? '*,5,*,5,*' : '*,10,*,10,*' }}"
    class="{{(_tinyScreen || _smallScreen) ? 'tiles-padding-small-screen' : 'tiles-padding' }}" iosOverflowSafeArea="false">

When moving from angular 17.2.1 to 17.3.0 this layout breaks because of the following line

android:columns="{{(_tinyScreen || _smallScreen) ? '*,5,*' : '*,10,*'}}" android:rows="{{(_tinyScreen || _smallScreen) ? '*,5,*,5,*' : '*,10,*,10,*' }}

_tinyScreen and _smallScreen are booleans both set to false. When I set columns and rows to a fixed value things are working as expected.

I also tried to change the property binding to the following line, but this also does not work:

[android:columns]="(_tinyScreen || _smallScreen) ? '*,5,*' : '*,10,*'" [android:rows]="(_tinyScreen || _smallScreen) ? '*,5,*,5,*' : '*,10,*,10,*' "

To Reproduce

Expected behavior

Sample project

Additional context

Commencez par la mise à niveau signalée vers Angular 17.3.0 et l’extrait de GridLayout, puis reproduisez l’échec de layout propre à Android avec les versions indiquées et comparez-le à Angular 17.2.1. Le travail est terminé lorsque android:columns et android:rows liés rendent la même grille que les valeurs fixes, sans régression dans le cas des petits écrans.