https://github.com/taiga-family/ng-polymorpheus
Polymorpheus is a tiny library for polymorphic templates in Angular.
https://github.com/taiga-family/ng-polymorpheus
angular customization hacktoberfest ng-template polymorphic template templates
Last synced: 15 days ago
JSON representation
Polymorpheus is a tiny library for polymorphic templates in Angular.
- Host: GitHub
- URL: https://github.com/taiga-family/ng-polymorpheus
- Owner: taiga-family
- License: apache-2.0
- Created: 2019-09-26T10:44:34.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T08:41:16.000Z (17 days ago)
- Last Synced: 2025-04-11T09:40:43.290Z (17 days ago)
- Topics: angular, customization, hacktoberfest, ng-template, polymorphic, template, templates
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/polymorpheus-demo
- Size: 109 MB
- Stars: 397
- Watchers: 11
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-angular - ng-polymorpheus - Polymorpheus is a tiny library for polymorphic templates in Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-polymorpheus - Polymorpheus is a tiny library for polymorphic templates in Angular. (Table of contents / Third Party Components)
README
# Polymorpheus
[](https://npmjs.com/package/@taiga-ui/polymorpheus)
[](https://app.codecov.io/gh/taiga-family/ng-polymorpheus/tree/master/projects)
[](https://github.com/taiga-family/angular-open-source-starter)
[](https://t.me/taiga_ui)
**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.
## What does it do?
It abstracts over different ways of view customization in Angular with one simple _structural directive_:
```html
{{text}}
```
**Content** accepts:
- primitives like `number` or `string`
- functions that take `context` as argument and return a primitive
- templates that get instantiated with given `context`
- components that would get `context` injected through DI
**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](https://stackblitz.com/edit/polymorpheus-demo) (wait for packages to install and run
`npm start`).
You can also
[read about this concept in detail](https://medium.com/angular-in-depth/agnostic-components-in-angular-2427923b742d).
### 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:
```ts
@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:
```typescript
readonly context!: { $implicit: number };
```
```html
{{ item.toFixed(2) }} <-- type 'number'
```
## Core team
Roman Sedov
**ng-polymorpheus** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is backed
and used by a large enterprise. This means you can rely on timely support and continuous development.
