FormattedString not working

[dreambo8563]

this is my template

<StackLayout orientation="vertical">

     <Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;">
        <Label.formattedText>
          <FormattedString>
            <FormattedString.spans>
              <Span text="label" fontAttributes="Bold" foregroundColor="#0000ff"></Span>
              <Span text="Label" fontAttributes="Italic" foregroundColor="#00ff00"></Span>
            </FormattedString.spans>
          </FormattedString>
        </Label.formattedText>
      </Label>


            <Button text="buttonButton" style="text-transform: uppercase;foregroundColor:#00ff00;fontAttributes:Italic">
            </Button>


</StackLayout>

actually, just display the button, no label here.
my question is:

1. how to use FormattedString with angular2. (xml & ts)
2. it seems the style fontAttributes/foregroundColor not working for the button here
3. the definition of FormattedString public fontAttributes: number; it's type of number. but I found all the material about it just accept sth like Italic/Bold. it's not a number

[hdeshev]

It seems we need a directive that lets you define formattedText in markup. Until that is available, you'd have to define formatted text in JavaScript.

2 and 3 above may be problems with the underlying Label/FormattedText implementation. You should probably open issues for them on the NativeScript/NativeScript repo.

[dreambo8563]

This issue was moved to NativeScript/NativeScript#1914

[dreambo8563]

reopen just for tracking formattedText directive work

[dreambo8563]

@hdeshev thanks for your update. I have to ask why should we have FormattedString & Span. It seems they have similar props. duplicated function I thought.

what about just have one Span directive for Button/Label ? Is that enough?
I'm new for nativescript, If my question is too stupid, pls show me the correct direction. thanks

<Button>
<Span style="xxxx"></SPan>
<Span style="yyy"></SPan>
</Button>

[palpa]

+1

[nsndeck]

With the new version of NativeScript-Angular FormattedString will be working. However short-hand syntax should be used:

<Button>
    <FormattedString>
        <Span text="some text" fontAttributes="Bold"></Span>
        <Span text="other text" foregroundColor="#FF0000"></Span>
    </FormattedString>
</Button>

@dreambo8563 About your third point "the definition of FormattedString public fontAttributes: number; it's type of number. but I found all the material about it just accept sth like Italic/Bold. it's not a number" the reason here is that fontAttributes type actually is an flagged enum and enums represtation in TypeScript is number.

About the second point "it seems the style fontAttributes/foregroundColor not working for the button here" - it also should work just fine with the upcoming version (a.k.a 2.0) of NativeScript.

[lano-vargas]

Still an here on latest version 👍
ns -v
8.4.0

It only display the button.