How to use Polymorpheus with a custom Angular component?

Pass the component as content to *polymorpheusOutlet and inject context using POLYMORPHEUS_CONTEXT token or the injectContext helper, as detailed in the README. This allows dynamic rendering with live updates.

Polymorpheus vs ngTemplateOutlet in Angular?

Polymorpheus extends ngTemplateOutlet by supporting more content types like strings, functions, and components, plus live context updates. It's more versatile but adds abstraction, while ngTemplateOutlet is simpler for basic template reuse.

Can Polymorpheus handle frequent context changes efficiently?

Yes, its live context ensures automatic propagation without performance hits in most cases. However, for extremely high-frequency updates, benchmark testing is recommended due to Angular's change detection overhead.

How to add TypeScript types to a Polymorpheus template?

Use the polymorpheus directive on an ng-template with a typed context object, enabling TypeScript inference within the template. The README provides examples with number types for clarity.

Is Polymorpheus compatible with Angular's latest versions?

As part of the actively maintained Taiga UI family, it regularly updates to support new Angular releases, including Ivy and standalone components, but always check the npm version for compatibility.

What are common use cases for Polymorpheus in real apps?

Ideal for customizable UI components like data tables with dynamic cells, menu lists with item templates, or tooltips with varied content, as shown in the demo and Taiga UI integration.

Open-Awesome

ng-polymorpheus

Apache-2.0TypeScriptv5.0.1

A tiny Angular library for creating polymorphic templates that accept strings, functions, templates, or components as content.

Visit Website GitHub

411 stars23 forks0 contributors

What is ng-polymorpheus?

Polymorpheus is a tiny Angular library that enables polymorphic templates through a single structural directive. It solves the problem of view customization by allowing components to accept various content types—including strings, functions, templates, and other components—with optional context for dynamic adaptation.

Target Audience

Angular developers building reusable, customizable UI components or design systems that require flexible content rendering.

Value Proposition

Developers choose Polymorpheus for its minimal footprint (1 KB), zero dependencies, and elegant abstraction over multiple Angular content rendering patterns, simplifying complex customization scenarios.

Overview

Polymorpheus is a tiny library for polymorphic templates in Angular.

Use Cases

Best For

Creating menu lists with configurable item templates
Building customizable data table cells with dynamic content
Implementing tooltip or popover components with varied content types
Developing design system components that accept custom templates
Abstracting view logic in reusable Angular component libraries
Handling dynamic content rendering with live context updates

Not Ideal For

Projects built with non-Angular frameworks like React or Vue
Applications with entirely static content and no dynamic template needs
Teams that prefer direct DOM manipulation over Angular's declarative templates
Simple components where Angular's built-in ngTemplateOutlet suffices

Pros & Cons

Pros

Tiny Bundle Size

At only 1 KB gzipped with zero dependencies, it has negligible impact on performance, as highlighted in the README.

Unified Content Abstraction

It consolidates multiple Angular view patterns—primitives, functions, templates, components—into one structural directive, simplifying customization.

Live Context Updates

Changes to context automatically propagate to views without manual refresh, ensuring real-time reactivity, as demonstrated with injectContext.

TypeScript Integration

Provides utilities to add TypeScript types to template contexts, enhancing type safety and developer experience, as shown in the code examples.

Enterprise Backing

Part of the Taiga UI family with active maintenance and enterprise support, offering reliability for production use.

Cons

Angular Framework Lock-in

Exclusively designed for Angular, making it unusable in other frameworks and limiting cross-platform adoption.

Abstraction Overhead

Introduces an additional layer of complexity with structural directives and dependency injection, which can be overkill for straightforward projects.

Niche Community

As a specialized library, it has a smaller ecosystem and fewer third-party resources compared to broader Angular solutions.

Frequently Asked Questions

Related Projects

gridstack

Build interactive dashboards in minutes.

Stars8,932

Forks1,407

Last commit2 days ago

angular-gridster2

Angular gridster 2

Stars1,341

Forks386

Last commit1 month ago

angular-split

🍌 Angular UI library to split views and allow dragging to resize areas using CSS grid layout.

Stars929

Forks219

Last commit2 months ago

angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.

Stars519

Forks73

Last commit8 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub