📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Angular

Formatted String

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.

Create Formatted String

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.

Label with formatted string

<Label class="h3 p-15 m-15 text-left">
    <FormattedString>
        <Span text="Words " color="#006600" ></Span>
        <Span text="with " color="#990000" fontAttributes="Bold"></Span>
        <Span text="different " color="#ffcc00"></Span>
        <Span text="color."></Span>
    </FormattedString>
</Label>

TextField with formatted string

<TextField class="h3 p-15 m-15 text-left input input-border">
    <FormattedString>
        <Span text="Formatted " fontSize="16"></Span>
        <Span text="String " fontSize="18"></Span>
        <Span text="TextField" fontSize="22"></Span>
    </FormattedString>
</TextField>

TextView with formatted string

Button with formatted string

Improve this document

Demo Source


API Reference for the Formatted String