registerElement call not mentioned in the docs

[AnthonyLenglet]

Which platform(s) does your issue occur on?

• iOS and Android
• 13.3 / 6
• iPhone 6s and Pixel 2

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.3.0
• Cross-platform modules: 6.3.2
• Runtime(s): 6.3.0 ios / 6.3.1 android
• Plugin(s):

  "dependencies": {
  "@angular/animations": "~8.2.0",
  "@angular/common": "~8.2.0",
  "@angular/compiler": "~8.2.0",
  "@angular/core": "~8.2.0",
  "@angular/forms": "~8.2.0",
  "@angular/platform-browser": "~8.2.0",
  "@angular/platform-browser-dynamic": "~8.2.0",
  "@angular/router": "~8.2.0",
  "@nativescript/theme": "~2.2.1",
  "nativescript-angular": "~8.20.3",
  "reflect-metadata": "~0.1.12",
  "rxjs": "^6.4.0",
  "tns-core-modules": "~6.3.0",
  "zone.js": "~0.9.1"
  },
  "devDependencies": {
  "@angular/compiler-cli": "~8.2.0",
  "@ngtools/webpack": "~8.2.0",
  "nativescript-dev-webpack": "~1.4.0",
  "typescript": "~3.5.3"
  },

Please, tell us how to recreate the issue in as much detail as possible.

• tns create ns-htmllabel-test --template tns-template-blank-ng
• cd ns-htmllabel-test
• tns plugin add nativescript-htmllabel
• In home.component.html

  
  <ActionBar>
  <Label text="Home"></Label>
  </ActionBar>

- `tns run ios`

### Is there any code involved? 

I used the basic template and added a simple label component with the html attribute

[farfromrefug]

@AnthonyLenglet cant help you without a sample or with Angular. However your code works without any issue in the demo-vue app from this repo. So i think the error must come either from angular or from your setup.

[AnthonyLenglet]

@AnthonyLenglet cant help you without a sample or with Angular. However your code works without any issue in the demo-vue app from this repo. So i think the error must come either from angular or from your setup.

Just tested the exact same way using the tns-template-blank template instead, so it doesn't work on my end with the xml version either, its super odd...

anything particular setup wise that could cause this, or is it too broad ?

[AnthonyLenglet]

tried doing this in home-page.js in the blank XML template

console.log(htmlLabel.buildHTMLString({
    text: 'Hello <strong>World</strong>!'
  }));

and it did seem to work:

[AnthonyLenglet]

Edit: while this does work, this removes all colors from the current labels

<HTMLLabel [html]="'Hello <b>world</b>!'"></HTMLLabel>
<Label class="h3 m-t-20 m-b-25 font-weight-medium">
  <FormattedString>
    <Span text="Hello "></Span>
    <Span class="text-primary" text="world"></Span>
    <Span text="!"></Span>
 </FormattedString>
</Label>

In this exemple, the word 'world' in the second text should be green, removing the plugin fixes this issue

---

Got it working ! 😄

In the vue demo app, this part is done

registerElement('HTMLLabel', () => require('nativescript-htmllabel').Label);

turns out you also have to do it in order to get it working in angular

did it in app.module.ts, can be done in a single component if it is only used there

import { registerElement } from "@nativescript/angular";
registerElement('HTMLLabel', () => require('nativescript-htmllabel').Label);

<StackLayout>
    <Label text="Hello <strong>World</strong>!"></Label>
    <HTMLLabel html="Hello <strong>World</strong>!"></HTMLLabel>
    <Label text="Hello ?"></Label>
</StackLayout>

only thing I am not sure about though: is it supposed to be in times new roman ? I'm guessing it is since its the default html font ?

[farfromrefug]

Ok so yes you need to register the comp :D You were using N one, thus the no rendering... About the font, yes and no ... Depends on your N version and a few other things. The best thing would be to force the font for all Labels