Search code examples
nativescriptnativescript-angular

angular ng-template with nativescript is really weird buggy

Sorry for that not so concrete title but starting with angular + NS I experience so much weird exceptional behavior that really wonders me.

That works ok:

<StackLayout>
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
             <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>

        </ng-template>
    </ListView>
</StackLayout>

That works not: (getting no concrete exception message just that getView call failed... great thanks...)

<StackLayout>
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
                <b>shit</b>           
        </ng-template>
    </ListView>
</StackLayout>

That works partially: (getting no exception here but the bold word shit is not visible)

<ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <StackLayout> <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
            <b>shit</b>
        </StackLayout>
    </ng-template>
</ListView>

Why result those code in such confusing cases?

Do I not understand the listview enough? What am I missing here?

Probably the case is that html tags like bold-tag seems not to be allowed within an ng-template used with NS but using a button/datepicker NS_angular component does not work either and result in an exception inside getView...

Update 1

Ok I just found out that I can not put more than one element inside ng-template that everything crashes oh come on what a lousy tooling behavior!!!

Putting a StackPanelLayout around the Label and Button then it is rendered!

I thought with NS + angular I can code with angular I was used to and just have a NS wrapper around not disturbing me. But it seems I have to learn NS a lot and put little angular knowledge inside, rather disappointing.

Solution

  • I would recommend you to go through the basics of {N} documentation to avoid further confusions.

    Your app is totally native here therefore you can't use HTML tags those are specific to Web Browsers. You must use the standard {N} UI widgets, to make text bold, you must use the fontWeight property or font-weight in CSS. If you like part of your text to be bold then you suppose to use FormattedString.