Comments (3)
To understand the behavior, it's worth keeping in mind that host directives are all resolved to a flat array during matching, instead of being treated as a tree. E.g. in your example Angular would match [Level3, Level2, Level1]
, rather than [Level3, [Level2, [Level1]]]
. In this context forwarding inputs multiple levels doesn't make sense, because there is no hierarchy.
As for this example:
What more this actually works:
@directive({
selector: '[level3]',
standalone: true,
hostDirectives: [{ directive: Level2Directive }],
})
export class Level3Directive {}
and exposes input of Level2Directive implicitly
Unless I'm missing something, that works because background
is exposed from Level1Directive
which was brought in by Level2Directive
.
from angular.
Say I use an directive from some lib:
- It has it's own inputs - well I can reuse it as hosted directive, reassigning input names, and even add diffrent hosted directive from some other lib that have the same input names but change them so they won't colllide.
- It has hosted directive and only reexports it, hard luck - now we cannot reassigning input names and use if with diffrent hosted directive - solution - do not use it or ask library author to change the way he implemented the directive - simply do not use hosted directives.
So basicly You need to look into implementation details of directives to knwon what can be done with them.
I would expect that hosted directive inputs/outputs are always resolved in the same way, so it would be transparent for user of lib whatever hosted directive was used or not to create some input.
Also TS-992017: Directive Level2Directive does not have an input with a public name of background.
is misleading as You can actually set input background on Level2Directive directive in html tempalte so it kinda does have that input.
You see confusion - sometimes input exist sometimes it does not.
If needed I can provide more examples in stackblitz of all the cases I mentioned in my posts.
from angular.
We can definitely do a better job at documenting the behavior, but I think it's consistent. The directives aren't really "mixed in", but rather they just get applied one after the other. The Directive Level2Directive does not have an input with a public name of background.
error is correct, because the background
input in that case writes to an instance of Level1Directive
.
from angular.
Related Issues (20)
- docs: @defer requires the parent component also be standalone
- BrowserViewportScroller not honoring native scroll margin HOT 4
- Unit Testing guide has incorrect code HOT 1
- Angular compiler seemingly false negative warning : optional chaining refused on array item HOT 3
- ActivatedRoute in Directive: Snapshot.params are not getting updated HOT 2
- APP_INITIALIZER with HttpClient provoke memory leak in SSR projects HOT 8
- New Angular Docs website is not PWA compatible
- @for can't be used for forms where $index based calls on removeAt() are necessary HOT 1
- Recording already in progress issue in Profiler
- SSR won't render [style.background-image] with base64 URL values
- Btter Docs About Error handling in httpClient HOT 2
- No compile time error/warning in HTML template when Signals variable used without parenthesis HOT 2
- Fail to load docs HOT 1
- We couldn't start the tutorial app. HOT 2
- ngProjectedAs not working when used as static host property inside @Component
- "Could not resolve dependency" for ts version in webcontainers at adev HOT 1
- ESBuild not calling any http request in server side HOT 2
- Unable to hydrate nested anchor elements HOT 3
- Broken links on ng-template reference page HOT 1
- [tour-of-heroes/toh-pt1][Format with the UppercasePipe] adding pipe {{hero.name | uppercase }} requires "CommonModule" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.