text decoration on Label is lost after rendering a label using HTMLLabel

[fpaaske]

How to reproduce:

Create a new project: ns create ui-label-test --ng cd ui-label-test Update items.component.html to include textDecoration="underline"

<ActionBar title="My App"> </ActionBar>

<GridLayout>
  <ListView [items]="itemService.items()">
    <ng-template let-item="item">
      <StackLayout [nsRouterLink]="['/item', item.id]">
        <Label [text]="item.name" class="text-lg text-gray-500 p-4"
          textDecoration="underline"
        ></Label>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout>

Run the app: ns run ios --emulator

Observe the text decoration working fine.

Add the plugin: npm i @nativescript-community/ui-label Register the HTMLLabel in app.component.ts: registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label); Add an HTMLLabel in the template:

<ActionBar title="My App"> </ActionBar>

<GridLayout>
  <ListView [items]="itemService.items()">
    <ng-template let-item="item">
      <StackLayout [nsRouterLink]="['/item', item.id]">
        <Label [text]="item.name" class="text-lg text-gray-500 p-4"
          textDecoration="underline"
        ></Label>
        <HTMLLabel>This is an HTMLLabel</HTMLLabel>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout>

Run the app: ns run ios --emulator

Observe that the text decoration is now gone.

---

You can also move the HTMLLabel to the item-detail.component.html. Then text decoration works fine until you navigate to the details, and back. When scrolling the list now, the underline disappears on the re-rendered list entries.

package.json

{
  "name": "ns-ng-ui-label-test",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~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/router": "~19.0.0",
    "@nativescript-community/ui-label": "^1.3.33",
    "@nativescript/angular": "^19.0.0",
    "@nativescript/core": "~8.8.0",
    "rxjs": "~7.8.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~19.0.0",
    "@angular/compiler-cli": "~19.0.0",
    "@nativescript/ios": "8.7.2",
    "@nativescript/tailwind": "^2.1.0",
    "@nativescript/types": "~8.8.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "~19.0.0",
    "tailwindcss": "~3.4.0",
    "typescript": "~5.6.0"
  }
}

[fpaaske]

I forgot to mention that this works well with

    "@nativescript-community/ui-label": "1.2.27",

[farfromrefug]

@fpaaske i tested here without angular and it is working fine with same about core version. Not sure if the issue is related to angular. If you can reproduce in a simple non angular project please share (and share the project).

[fpaaske]

@farfromrefug It could be Angular issue. I tried to reproduce without, but I don't know how to use the plugin without Angular. I tried with plain XML, but it doesn't load (perhaps I'm doing something wrong)

Update: I figured out the syntax for plain XML. Adding textDecoration="underline" works at first.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

    <ActionBar title="My App" icon="" />

    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center" />
        <Button text="TAP" tap="{{ onTap }}" class="-primary" />
        <Label text="{{ message }}" class="h2 text-center" textWrap="true" textDecoration="underline" />
    </StackLayout>
</Page>

Then I update the template to include ui-label, and the underline disappears.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:l="@nativescript-community/ui-label">

    <ActionBar title="My App" icon="" />

    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center" />
        <Button text="TAP" tap="{{ onTap }}" class="-primary" />
        <Label text="{{ message }}" class="h2 text-center" textWrap="true" textDecoration="underline" />
        <l:Label html="<h1>test</h1>"></l:Label>
    </StackLayout>
</Page>

Archive.zip

[fpaaske]

Additional info; this seems to work fine on Android in all cases. So the issue seems limited to iOS.

[farfromrefug]

@fpaaske ok tried on Android indeed! Sadly my macbook is dead :s So no more iOS dev for me until further notice (will try to find a solution in september when i am back). In the meantime if you can create a PR to fix it i can remotely release it

[farfromrefug]

@fpaaske fixed in 1.3.39