formatted-string-ng.md

title	Using formatted string
description	Learn how to use the FormattedString class in an Angular app
position	2
slug	formatted-string
previous_url	/formatted-string
environment	angular

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>

Binding (Two-way)

<Label>
    <FormattedString>
        <Span [text]="title" fontWeight="Bold" textDecoration="underline"></Span>
    </FormattedString>
</Label>

import { Component } from '@angular/core';

@Component({
  selector: 'ns-main',
  moduleId: module.id,
  templateUrl: './main.component.html',
})
export class MainComponent {
    public title: string;

    constructor() {
    	this.title = "Hello Word";
    }
}

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>