taiga-family / ng-polymorpheus Goto Github PK
View Code? Open in Web Editor NEWPolymorpheus is a tiny library for polymorphic templates in Angular.
Home Page: https://stackblitz.com/edit/polymorpheus-demo
License: Apache License 2.0
Polymorpheus is a tiny library for polymorphic templates in Angular.
Home Page: https://stackblitz.com/edit/polymorpheus-demo
License: Apache License 2.0
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.
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;
}
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.
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.
Support Angular 16
No response
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.
No response
No response
'in' operator doesn't work correctly with POLYMORPHEUS_CONTEXT
constructor(
@Inject(POLYMORPHEUS_CONTEXT) readonly context: Record<string, string>
) {
// context = { a: 'text' }
const hasA = 'a' in context; // false
const value = context.a // 'text'
}
https://stackblitz.com/edit/angular-gwybp9?file=src%2Fapp%2Fapp.component.html
error occurs when using primitive as context in tooltip
related #175
12>
No response
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.
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.
There's no reason for them to be hanging around in class
Would be interesting to use those components in a formgroup.
Use like
<app-input formControlname="firstName">
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
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.
From README.md follow a link to https://codesandbox.io/s/github/TinkoffCreditSystems/ng-polymorpheus/tree/master/projects/demo
To see a working example.
No additional context required.
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.
Angular recommends to use standalone components | pipes | directives
.
And for good reason :).
Is it possible to migrate these directives to standalone?
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.
No response
Столкнулись с такой проблемой (приложение на 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 чтоб не лагало, но надо б поправить всеравно :)
17.0.3
3.48.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.