Home

Awesome

Polymorpheus

npm version Coverage Status angular-open-source-starter telegram chat

Polymorpheus is a tiny library for polymorphic templates in Angular.

It is 1 KB gzip, dependency free and allows you to make pretty cool things.

Polymorpheus

What does it do?

It abstracts over different ways of view customization in Angular with one simple structural directive:

<ng-container *polymorpheusOutlet="content as text; context: context">{{text}}</ng-container>

Content accepts:

Context is optional when you need your content to adapt to the situation

How to use it?

Typical use case would be a component that accepts visual customization and defines context by itself. Say a menu list where you can configure how each item should look like by passing a template. And context would be item itself and, for example, whether it is focused or not.

Please see extensive demo (wait for packages to install and run npm start).

You can also read about this concept in detail.

Accessing context in dynamic component

If you use component content you can inject context with POLYMORPHEUS_CONTEXT token.

Important! This object is live so if you change it, your component will not be recreated:

@Component({
  template: `
    {{ context.active }}
  `, // <-- this will automatically update
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
  constructor(@Inject(POLYMORPHEUS_CONTEXT) readonly context: {active: boolean}) {}
}

Adding type to template context

You can use polymorpehus directive to add type to template context:

readonly context!: { $implicit: number };
<ng-template
  #template="polymorpheus"
  [polymorpheus]="context"
  let-item
>
  {{ item.toFixed(2) }} <-- type 'number'
</ng-template>

Core team

<table> <tr> <td align="center"> <a href="https://twitter.com/waterplea" ><img src="https://github.com/waterplea.png?size=100" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Alex Inkin" /><br /><b>Alex Inkin</b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/waterplea" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/waterplea" title="Github" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/waterplea" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> <td align="center"> <a href="https://twitter.com/marsibarsi" ><img src="https://github.com/marsibarsi.png?size=100" width="100" style="margin-bottom: -4px; border-radius: 8px;" alt="Roman Sedov" /><br /><b>Roman Sedov</b></a > <div style="margin-top: 4px"> <a href="https://twitter.com/marsibarsi" title="Twitter" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg" /></a> <a href="https://github.com/marsibarsi" title="GitHub" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" /></a> <a href="https://t.me/marsibarsi" title="Telegram" ><img width="16" src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg" /></a> </div> </td> </tr> </table>

ng-polymorpheus is a part of Taiga UI libraries family which is backed and used by a large enterprise. This means you can rely on timely support and continuous development.