@enerex/ng-template-studio

A reusable Angular UI library that provides a Template Editor experience.

• Ships a single module: TemplateEditorModule
• Primary component:

<template-editor></template-editor>

• Configure once at the app root via TemplateEditorModule.forRoot(config).

Table of contents

• Installation
• Styles
• Quick start
  • NgModule app
  • Standalone app
• API
• Peer dependencies
• Troubleshooting
• Contributing
• License

Installation

# 1) Install the library
npm i @enerex/ng-template-studio

# 2) Install required peer deps (match versions with your app)
npm i @angular/common@^20.1.0 @angular/compiler@^20.1.0 @angular/core@^20.1.0 \
      @angular/forms@^20.1.0 @angular/platform-browser@^20.1.0 @angular/router@^20.1.0 \
      rxjs@~7.8.0 \
      @ng-bootstrap/ng-bootstrap@^19.0.1 \
      @tanstack/angular-query-experimental@^5.84.2 @tanstack/query-core@^5.84.2 \
      bootstrap@^5.3.6 @popperjs/core@^2.11.8

This package lists the above as peerDependencies, so they must be present in your app.

Styles

Include Bootstrap first, then (optionally) the package’s global styles.

Option A — via angular.json

// angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              // Optional: import package styles if you use them
              "node_modules/@enerex/ng-template-studio/styles/style.scss",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

Option B — via your global styles.scss

/* src/styles.scss */
@import "bootstrap/scss/bootstrap"; // or add CSS in angular.json

/* Import the package styles (if present) */
@use "@enerex/ng-template-studio/styles/style.scss" as *;
/* If the package exposes an index, you can:
   @use '@enerex/ng-template-studio/styles' as *;
*/

If you cannot resolve the styles path during local development, ensure the package is installed into node_modules (e.g., npm i ./dist/ng-template-studio) or add an includePath to your demo app.

Quick start

NgModule app (classic)

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from "./app.component";

import { TemplateEditorModule } from "@enerex/ng-template-studio";

// TanStack Query (provide once if your app doesn't already)
import { provideAngularQuery } from "@tanstack/angular-query-experimental";
import { QueryClient } from "@tanstack/query-core";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TemplateEditorModule.forRoot({
      projectId: "YOUR_PROJECT_ID",
      enerexIdentifier: "YOUR_ENEREX_ID",
      clientId: "YOUR_CLIENT_ID",
      apiKey: "YOUR_API_KEY",
    }),
  ],
  providers: [
    // Provide a single QueryClient for the app (unless you already do)
    provideAngularQuery(new QueryClient()),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- app.component.html -->
<template-editor></template-editor>

Standalone app (no AppModule)

// main.ts (or app.config.ts)
import { bootstrapApplication, importProvidersFrom } from "@angular/core";
import { provideHttpClient } from "@angular/common/http";
import { AppComponent } from "./app/app.component";

import { TemplateEditorModule } from "@enerex/ng-template-studio";

import { provideAngularQuery } from "@tanstack/angular-query-experimental";
import { QueryClient } from "@tanstack/query-core";

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TemplateEditorModule.forRoot({
        projectId: "YOUR_PROJECT_ID",
        enerexIdentifier: "YOUR_ENEREX_ID",
        clientId: "YOUR_CLIENT_ID",
        apiKey: "YOUR_API_KEY",
      })
    ),
    provideAngularQuery(new QueryClient()),
  ],
});

// app.component.ts (standalone)
import { Component } from "@angular/core";
import { TemplateEditorModule } from "@enerex/ng-template-studio";

@Component({
  selector: "app-root",
  standalone: true,
  // Import the module (or import a standalone component if the library exposes one)
  imports: [TemplateEditorModule],
  template: `<template-editor></template-editor>`,
})
export class AppComponent {}

API

TemplateEditorModule.forRoot(config)

Registers providers for the editor. Call once at the application root.

export interface TemplateEditorConfig {
  projectId: string;
  enerexIdentifier: string;
  clientId: string;
  apiKey: string;
}

Main component

<template-editor></template-editor>

Peer dependencies

Install versions compatible with your Angular app:

{
  "@angular/common": "^20.1.0",
  "@angular/compiler": "^20.1.0",
  "@angular/core": "^20.1.0",
  "@angular/forms": "^20.1.0",
  "@angular/platform-browser": "^20.1.0",
  "@angular/router": "^20.1.0",
  "@ng-bootstrap/ng-bootstrap": "^19.0.1",
  "@tanstack/angular-query-experimental": "^5.84.2",
  "bootstrap": "^5.3.6",
  "@popperjs/core": "^2.11.8",
  "rxjs": "~7.8.0"
}

Troubleshooting

• Type 'ModuleWithProviders<...>' is not assignable...
  Don’t call forRoot() inside a standalone component’s imports. Use importProvidersFrom(TemplateEditorModule.forRoot(...)) in bootstrapApplication.

• Cannot find module '@tanstack/angular-query-experimental'
  Install the peer (and @tanstack/query-core) in the host app.

• Styles not applying
  Ensure Bootstrap is included and the package SCSS path resolves from node_modules. For local dev, install from ./dist or add an includePath.

Contributing

Issues and PRs are welcome. Please follow conventional commit messages and include reproduction steps where applicable.

License

MIT (c) Enerex