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

6 posts, 0 answers
  1. Rajasekar
    Rajasekar avatar
    8 posts
    Member since:
    May 2017

    Posted 24 May Link to this post

    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 ?

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    305 posts

    Posted 25 May Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Rajasekar
    Rajasekar avatar
    8 posts
    Member since:
    May 2017

    Posted 25 May in reply to nikolay.tsonev Link to this post

    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.

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    305 posts

    Posted 25 May Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Rajasekar
    Rajasekar avatar
    8 posts
    Member since:
    May 2017

    Posted 26 May in reply to nikolay.tsonev Link to this post

    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

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    305 posts

    Posted 26 May Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top