How to make "NativeScript Collapsing Header Plugin" work with Angular

Question

Is there a way to make "NativeScript Collapsing Header Plugin" (https://market.nativescript.org/plugins/nativescript-collapsing-header) work with NativeScript-Angular?

I have tried importing into app.component.ts using:

registerElement("CollapsingHeader", () => require("nativescript-collapsing-header").CollapsingHeader);

Tried to display it in home.component.html

<GridLayout class="page page-content">
    <PullToRefresh (refresh)="refreshList($event)">
        <collapsingHeader:CollapsingHeader>
            <collapsingHeader:Header class="header-template">
                <Label id="headerLabel" text="Collapsing Header Text"></Label>
            </collapsingHeader:Header>
            <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>
        </collapsingHeader:CollapsingHeader>
    </PullToRefresh>
</GridLayout>

Getting this error:

Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Expecting a valid View instance.

Any help would be appreciated. Thanks.

Manoj Manoj · Accepted Answer · 2019-05-05T09:42:48

You have registered the CollapsingHeader view exposed by the plugin properly but you are using the NativeScript Core syntax in your HTML template.

Instead of <collapsingHeader:CollapsingHeader> try <CollapsingHeader> which matches your first parameter to registerElement.

Also you might have to register the header component, before using it in your HTML

registerElement("Header", () => require("nativescript-collapsing-header").Header);

and use it as <Header> in your HTML.

How to make "NativeScript Collapsing Header Plugin" work with Angular

1 Answers