How to use an Angular component + template

[hrueger]

I'm trying to create an Angular-only plugin. I want to add an Angular component and a template. So I put the component file and the template file in packages/nativescript-squirrel-chat-ui/angular and added it to the declarations of the module in index.ts. But now I have two problems: When building the plugin, it says `

ERROR: Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("bble-content">
                        <GridLayout rows="auto, auto">
                            [ERROR ->]<Label class="sendername" row="0" *ngIf="!isContinuing(item) && !item.fromMe" [text]="item.sender.nam")
The pipe 'date' could not be found ("

                        <FlexboxLayout class="meta">
                            <Label [text]="[ERROR ->]item.date | date:'shortTime'" class="time"></Label>
                            <Label [text]="getSt")

So I removed the date pipe and changed *ngIf to [visibility]="[...] ? 'visible' : 'hidden'". Now the plugin builds successfully.

However, when I try to use the component in the demo-angular app, it is just blank.

My plugin is here: https://github.com/SchoolSquirrel/nativescript-plugins/tree/main/packages/nativescript-squirrel-chat-ui

Do you have any idea?

[NathanWalker]

@hrueger make sure the plugin's module includes NativeScriptCommonModule as that's where ngIf comes from etc.: https://github.com/SchoolSquirrel/nativescript-plugins/blob/main/packages/nativescript-squirrel-chat-ui/angular/index.ts#L8

You can always debug step through code in chrome dev tools to see how your plugin is behaving in the demo app.

[hrueger]

@NathanWalker Oh thanks, I missed the NativeScriptCommonModule. Sorry for that. Now it builds without any errors, however, the demo app still shows blank space where the UI is supposed to be.

Chrome Dev Tools show this:

The tests label shows, but below it there is just nothing...

[hrueger]

@NathanWalker Sorry for another ping, but it's been almost two weeks ;-)

[NathanWalker]

@hrueger sorry for late reply here - from looks of your repo seems you got past this?

[hrueger]

@NathanWalker No, unfortulately, not. The demo-angular app still only displays the tests label (see comment above)

[cvietor]

@hrueger 2 minor issues there with your code:

• Rename your SquirrelChatUiModule in packages/nativescript-squirrel-chat-ui/angular to NativeScriptSquirrelChatUiModule for example, because otherwise you have a naming conflict with the SquirrelChatUiModule in your demo-angular project.
• Export your NativescriptSquirrelChatUiComponent from that module

import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativescriptSquirrelChatUiComponent } from './nativescript-squirrel-chat-ui.component';
import { NativeScriptCommonModule } from "@nativescript/angular";

@NgModule({
    declarations: [
        NativescriptSquirrelChatUiComponent,
    ],
    imports: [
        NativeScriptCommonModule,
    ],
    schemas: [
        NO_ERRORS_SCHEMA,
        CUSTOM_ELEMENTS_SCHEMA,
    ],
    exports: [
      NativescriptSquirrelChatUiComponent
    ]
})
export class NativeScriptSquirrelChatUiModule {}

Import your NativeScriptSquirrelChatUiModule in the demo-angular's squirrel-chat-ui.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
import { SquirrelChatUiComponent } from './squirrel-chat-ui.component';
import { NativeScriptSquirrelChatUiModule } from '@schoolsquirrel/nativescript-squirrel-chat-ui/angular';

@NgModule({
    imports: [
            NativeScriptCommonModule, 
            NativeScriptSquirrelChatUiModule, 
            NativeScriptRouterModule.forChild([{ path: '', component: SquirrelChatUiComponent }])],
    declarations: [SquirrelChatUiComponent],
    schemas: [NO_ERRORS_SCHEMA],
})
export class SquirrelChatUiModule {}

Then you should be good to go... Still an issue with that RadListView but i think that one is just missing an import

[hrueger]

@cvietor Thanks a lot!