NativeScript Core

How to use the FormattedString class in text

NativeScript has a special class called FormattedString to support various text transformations and decorations. The FormattedString class can be used with all text-related components like Label, TextView, TextField and even Button. Using FormattedString within an NativeScript-Angular app requires using a special syntax because of how Angular views get added to the native visual tree. Here’s what the correct syntax looks like:

<Label>
    <FormattedString>
        <Span text="some content" fontWeight="Bold"></Span>
    </FormattedString>
</Label>

This syntax differs from the full syntax of FormattedString used in NativeScript Core, shown below, which does not work in Angular apps:

<Label>
    <Label.formattedText>
        <FormattedString>
            <FormattedString.spans>
                <Span text="some " fontWeight="Bold"></Span>
                <Span text="content"></Span>
            </FormattedString.spans>
        </FormattedString>
    </Label.formattedText>
</Label>