Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 months 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 (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T10:20:37.000Z (3 months ago)
- Last Synced: 2024-04-14T04:25:07.188Z (3 months ago)
- Topics: angular, customization, hacktoberfest, ng-template, polymorphic, template, templates
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/polymorpheus-demo
- Size: 7.72 MB
- Stars: 369
- Watchers: 13
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Lists
- awesome-angular - ng-polymorpheus - Polymorpheus is a tiny library for polymorphic templates in Angular. (Table of contents / Third Party Components)
- awesome-angular-ru - ng-polymorpheus
README
# Polymorpheus
[](https://npmjs.com/package/@tinkoff/ng-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.
