How to return xml from angular pipe and bind to view as xml in nativescript?

[Rajasekar]

I use angular pipe to show the number as two different color. Blue color for wholenumber and red color for decimal part.

When i return the formatted content as xml from pipe and bind to the view,the whole xml is rendering as text. How to render it as xml

DecimalFormat.pipe,ts

@Pipe({
name: 'DecimalFormat'
})
export class DecimalFormat implements PipeTransform {
transform(value: number): string {
let wholeN = (value + "").split(".")[0];
let decimalN = (value + "").split(".")[1];
return "<Label class='blue'>" + wholeN +"</Label><Label class='red'>." + decimalN + "</Label>";

}

 

 

detail.component.html

<Label class="claimData amount" col="1" row="2" [text]="selectedClaim.paidAmount | DecimalFormat"></Label>

 

 

How can i render the string from pipe as XML in view ?

[Nikolay Tsonev]

Hello,
Thank you for contacting us.


I reviewed your case, however using custom pipe in this way will display the XML as plain text in the parent Label. This is something expected and in case you would like to change the color of the text on some condition you could make the validation for the whole or decimal number inside the HTML. For example:

HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
   <Label [text]="number1" [color]="number1%1 === 0 ? 'red' : 'green'" textWrap="true"></Label>
   <Label [text]="number2" [color]="number2%1 === 0 ? 'red' : 'green'" textWrap="true"></Label>
</StackLayout>

TypeScript

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];
    number1:number=12;
    number2:number=12.5;

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }
}

Let me know, whether this help or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress

[Rajasekar]

Hi,

The example you provided is very simple case.

In my application i have a array with thousands of data with a property called 'amount'. Amount property will have some value like '423.23'. I need to format the whole number '423' and '.23' differently. In this case i can't be able to follow your approach.

[Nikolay Tsonev]

Hi Rajasekar,

In case you want to set a different color for the whole and decimal part of the number, you could use FormattedText and Spans. Then you should be able to setup the color on the needed way for the multiple elements.
Example:
HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
    <ListView [items]="items">
        <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
            <StackLayout>

                <Label textWrap="true">
                        <FormattedString>
                                <Span [text]="(''+item).split('.')[0]" color="green" fontAttributes="Bold"></Span>
                                <Span [text]="item %1  === 0? '' : '.'" color="black" fontAttributes="Bold"></Span>
                                <Span [text]="(''+item).split('.')[1]" color="red" fontAttributes="Bold"></Span>
                        </FormattedString>
                </Label>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

TypeScript
```

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items:Array<number>=[12.4, 13, 11.33, 15, 16];

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
    }
}

Let me know, whether this is applicable for you.
Regards,
nikolay.tsonev
Telerik by Progress

[Rajasekar]

Hi

Its working fine..

 

But only one issue. When i try to render '00' in the view, nativescript automatically truncates one zero and renders only one '0'.

 

I tried returning that zero as string from my typescript file, but no luck

[Nikolay Tsonev]

Hi,

I reviewed that case with removing the leading zero from the number and unfortunately, it is a real issue.
Most probably the string started with 0 is treated as numbers and in this starting number will be removed.
Also at this time there is no possible workaround that could solve this behavior

For your convenience, I logged this problem in the issue here and you could keep track on it for further info.


Let me know if I could assist you further.
Regards,
nikolay.tsonev
Progress Telerik