Angular Selectorless Support

Preface

• Recently, while implementing the Angular adapter for opentui, the special mechanism of opentui made it necessary to rewrite the renderer. This led to the discovery that virtual nodes can reduce the rendering of custom component tags. Therefore, I attempted to extract this approach for standalone use in the browser.

Usage

• Install @cyia/ngx-common/service
• Configuration

import { ApplicationConfig, provideBrowserGlobalErrorListeners, RendererFactory2 } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { DomRendererFactory2 } from '@cyia/ngx-common/service';
export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    // Add this configuration
    { provide: RendererFactory2, useClass: DomRendererFactory2 },
  ],
};

Limitations

• Implementing styles inside components is forbidden, because styles require an outermost element with attributes to define the scope, while selectorless components have no outermost element.
• Elements must be manually marked as selectorless because the implementation operates at the application layer, and element rendering is decoupled from component binding, so manual specification is required.

import { selectorlessExcludeTag } from '@cyia/ngx-common/service';
selectorlessExcludeTag('app-t1');

• Directives that bind to and manipulate the DOM cannot be implemented. Normal directive binding still works, but if a directive internally performs operations that involve obtaining an ElementRef, they cannot be realized.

Source Code

• cyia-ngx-common