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.

Usage

<Button class="-primary p-8">
    <FormattedString>
        <Span text="&#xf007;" class="fas t-18"></Span>
        <Span text=" Different " color="red"></Span>
        <Span text="colors in "></Span>
        <Span text=" Button " backgroundColor="green" color="whitesmoke"></Span>
    </FormattedString>
</Button>
.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-18 {
    font-size: 18;
}

Improve this document

Demo Source


Properties

Name Type Description
spans ObservableArray<Span> An observable collection of Span objects used to define common text properties.

API References

Name Type API Reference Link
tns-core-modules/text/formatted-string Module
FormattedString Class
Span Class
ViewBase Class