Nanobot: Polygonal Mascot

    @tinkoff/ng-polymorpheus
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.10 • Public • Published

    Polymorpheus

    npm version Build Status Coverage Status angular-open-source-starter

    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:

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

    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 (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>

    Open-source

    Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.

    Core team

    Alex Inkin
    Alex Inkin
    Roman Sedov
    Roman Sedov

    Install

    npm i @tinkoff/ng-polymorpheus

    DownloadsWeekly Downloads

    4,986

    Version

    4.0.10

    License

    Apache-2.0

    Unpacked Size

    99.7 kB

    Total Files

    29

    Last publish

    Collaborators

    • makar_l
    • tinkoffbank
    • tom910
    • dmitry-korolev
    • rouland
    • ishivan
    • ytsareva
    • shoom3301
    • waterplea
    • meskill
    • marsibarsi
    • zig-green
    • defenderbass
    • super_oleg
    • dersizes
    • alexkvak