Hi,
going through the changelog for Angular 13.2.rc I found this change:
feat(core): allow for the injector to be specified when creating an embed…
angular/angular#14935
angular/angular@b49ffcd

I'm pretty sure this library could utilize this feature.

Description

Support Angular 16

Description

The current npm release of Polymorphius lacks support for standalone components, unlike the demo version. This limits integration into projects using new versions of angular. Can the maintainers provide an updated npm release with this support?

Since importing the library directly by copying the folder of the master into the project directory is not an ideal solution for various reasons, including maintenance and version control concerns.

Thank you.

Playground Link

No response

Description

When using templates or components, primitive context is broken. For components it throws:
Cannot create a proxy with a non-object as target or handler
For templates it's just inaccessible because you cannot let- it on ng-template. We need to change it to { $implicit: xxx } object for such cases, if we have template or component content. Or consider any other alternatives.

Angular version

No response

Taiga UI version

No response

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

Description

Angular recommends to use standalone components | pipes | directives.
And for good reason :).

Is it possible to migrate these directives to standalone?

When using content as aliasing for primitive content templates, result is not properly typed:

Technically it can be string | number, but I'm not sure if we should bother. It is mostly going to be a string.

🚀 Feature request

Is your feature request related to a problem?

I want to use this library with ngx-translate. I'd like to pass the translation which is an Observable<string> as PolymorpheusContent. I don't want to use ng-template for this since it's just a text. I also have to pass it in my component (to the Angular Materials Dialog's data):

this.dialog.open(MyDialogComponent, {
  data: {
    title: this.translateService.get('confirm.title')
  }
});

In the example above, the translateService#get returns an Observable<string>, but data's title has a type PolymorpheusContent. It is incompatible.

Describe the solution you'd like

It would be great if I could pass Observable<primitive> as the PolymorpheusContent.

I don't know if the observable should be exposed to the T, but it would be a great option since we don't know what do we have — an observable or not (in case of my feature request is implemented):

<!-- Should we use async? -->
<span>{{content}}</span>

But I came up with a workaround — a custom wrapper pipe that will async the value only if it's an observable:

transform<T>(value: T | Observable<T>): T {
  return value instanceof Observable ? this.asyncPipe.transform(value) : value;
}

Additional context

Maybe I've missed somewhere and it is available now. If so, please provide me an example since I did not find any solution in the demo.

🚀 Feature request

Is your feature request related to a problem?

Would be interesting to use those components in a formgroup.

Describe the solution you'd like

Use like

<app-input formControlname="firstName">

🐞 Bug report

Description

'in' operator doesn't work correctly with POLYMORPHEUS_CONTEXT

Reproduction

constructor(
    @Inject(POLYMORPHEUS_CONTEXT) readonly context: Record<string, string>
  ) {
  // context = { a: 'text' }
  const hasA = 'a' in context; // false
  const value = context.a // 'text'
}

Versions

• Angular 12
• Taiga UI v2.20

Playground Link

No response

Description

Столкнулись с такой проблемой (приложение на Angular 17.0.3) выдает ошибку очень сильным спамом в console.

core.mjs:13703 Angular: Replacing the `context` object of an `EmbeddedViewRef` is deprecated.

она идет из webpack:///node_modules/@tinkoff/ng-polymorpheus/fesm2015/tinkoff-ng-polymorpheus.js#97 там где идёт установка контекста

ngOnChanges({ content }) {
        var _a;
        const context = this.getContext();
        if (this.v) {
            this.v.context = context;  // <------- тут
        }

словили на <tui-select> элементе (на всех что были в прилаге), лаги происходят при открытых DevTools из-за спама console.warn.

/**
     * @deprecated Replacing the full context object is not supported. Modify the context
     *   directly, or consider using a `Proxy` if you need to replace the full object.
     * // TODO(devversion): Remove this.
     */
set context(value) {
        if (ngDevMode) {
            // Note: We have a warning message here because the `@deprecated` JSDoc will not be picked
            // up for assignments on the setter. We want to let users know about the deprecated usage.
            console.warn('Angular: Replacing the `context` object of an `EmbeddedViewRef` is deprecated.');
        }
        this._lView[CONTEXT] = value;
    }

если закрыть DevTools, то лаги пропадают, но разрабатывать с закрытыми DevTools не очень.
в проде тоже не лагает. Есть идеи как поправить можно?

так же нашли информацию:
Swapping out the context object for EmbeddedViewRef is no longer supported. Support for this was introduced with v12.0.0, but this pattern is rarely used. There is no replacement, but you can use simple assignments in most cases, or Object.assign , or alternatively still replace the full object by using a Proxy(seeNgTemplateOutlet` as an example).

https://github.com/angular/angular/blob/main/CHANGELOG.md

p.s. пока как воркэраунд удалил из node_modules/@angular/core/fesm2022/core.mjs и node_modules/@angular/core/esm2022/src/render3/view_ref.mjs этот console.warn чтоб не лагало, но надо б поправить всеравно :)

Angular version

17.0.3

Taiga UI version

3.48.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

In Angular 12 templates no longer mutate context. Polymorpheus 4 resolves this by using a Proxy object. We need to implement similar approach in Polymorpheus 3 so that components are not re-created every time context changes.

Description

Angular v17 standalone API support, with compatibility with the current NgModule-based API.

I'll be glad to work on this if you guys think it a good idea.

There's no reason for them to be hanging around in class

Typing using object or {} is linted by eslint as banned (rule @typescript-eslint/ban-types).
But current typing in the library makes it hard to avoid.

Would you consider changing to more precise types such as unknown where possible (e.g. I find TemplateRef<unknown> handy in my code and do not see drawbacks to that), or other choices where it applies?

If so, I could give it a shot and make some proposals.

Hi,

First of all, I love this idea. It makes customisation so much more future-proof. Although the idea is a bit hard to grasp at first, it's really powerful.

I have a question regarding styling. Why is the default styling of the outlet :host { display: block; }? I want my outlet to be inline. I now have to override this with !important because I'm using global styling to style this component. Why can't it just be the default of unset?

Here is my example, note the !important I have to apply. FYI: I want my styling to be global so it can be customised using SASS variables (this component can be part of a component lib distributed via npm).

Hope to hear from you!

Kind regards,
Joep Kockelkorn

Playground Link

https://stackblitz.com/edit/angular-gwybp9?file=src%2Fapp%2Fapp.component.html

Description

error occurs when using primitive as context in tooltip

related #175

Angular version

12>

Taiga UI version

No response

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

🐞 Bug report

Description

URL: https://codesandbox.io/s/github/TinkoffCreditSystems/ng-polymorpheus/tree/master/projects/demo
Shows:

Something went wrong
API rate limit exceeded for app ID c07a89833b557afc7be2.

Reproduction

From README.md follow a link to https://codesandbox.io/s/github/TinkoffCreditSystems/ng-polymorpheus/tree/master/projects/demo

Expected behavior

To see a working example.

Versions

• Browser - any

Additional context

No additional context required.