Grid Template not working when importing individual components

[austinthedeveloper]

PACKAGE: "ej-angular2": "^16.1.37"

I'm following the guide for importing components:

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#importing-required-syncfusion-angular-components

All EJ Components are declared in an EJ module and exported, similar to how Material Design works. It is then shared with the main module (We only have one module for this app). This method works great and has saved us about 8mb when running a build. The issue is that I can't get the Grid templates to work. Any table cell using this format fails for us:

<e-column headerText="HEADER">

  <ng-template e-template let-data>

    {{data.EXAMPLE}}

  </ng-template>

</e-column>

I see the notes that EJTemplateDirective needs to be in the app too but I can't figure out where it is supposed to go. I have put this in the EJ module as an import, provider, declaration, and nothing works. The same error shows up in the front-end every time: "ej is not defined". 

import { EJTemplateDirective } from 'ej-angular2/src/ej/template';

Where am I supposed to import the template directive? See below for the entire EJ module that I am using. The app runs and builds perfect other than ignoring the [e-template] directive.

NOTE: This is the only import for Syncfusion in this app. 

// EJ MODULE START

import { EJ_DIALOG_COMPONENTS } from 'ej-angular2/src/ej/dialog.component';

import { EJ_GRID_COMPONENTS } from 'ej-angular2/src/ej/grid.component';

import { EJ_DATEPICKER_COMPONENTS } from 'ej-angular2/src/ej/datepicker.component';

import { EJ_BUTTON_COMPONENTS } from 'ej-angular2/src/ej/button.component';

import { EJ_UPLOADBOX_COMPONENTS } from 'ej-angular2/src/ej/uploadbox.component';

import { EJ_TAB_COMPONENTS } from 'ej-angular2/src/ej/tab.component';

import { EJ_DROPDOWNLIST_COMPONENTS } from 'ej-angular2/src/ej/dropdownlist.component';

import { EJ_MENU_COMPONENTS } from 'ej-angular2/src/ej/menu.component';

const SyncfusionArray: any[] = [

  EJ_DIALOG_COMPONENTS,

  EJ_GRID_COMPONENTS,

  EJ_DATEPICKER_COMPONENTS,

  EJ_BUTTON_COMPONENTS,

  EJ_UPLOADBOX_COMPONENTS,

  EJ_TAB_COMPONENTS,

  EJ_DROPDOWNLIST_COMPONENTS,

  EJ_MENU_COMPONENTS,

];

@NgModule({

  declarations: [...SyncfusionArray],

  exports: [...SyncfusionArray],

})

export class SyncfusionModule {}

// EJ MODULE END

[austinthedeveloper]

Update: I found an example that fixed the issue. No modifications were made to my EJ module.

For any person running into this issue and stumbling upon this thread, the directive needs to be declared in your app.module, not the Syncfusion module.

// app.module.ts

@NgModule({

  imports: [

    SyncfusionModule,

  ],

  declarations: [

    EJTemplateDirective,

  ],

// end app.module.ts

[Prasanna Kumar Viswanathan]

Hi Austin, 

 

Thanks for contacting Syncfusion support. 

 

We are happy to hear that you have fixed the issue. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V