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)
- Support VSCode intellisense for `@Attribute` / `HostAttributeToken` usage. HOT 5
- Provide a option to print an error report in the browser if Angular failed to launch due to a JS error HOT 8
- Page not found HOT 1
- ChangeDetection is not triggered after http put when using provideExperimentalZonelessChangeDetection on Angular 18 HOT 8
- ng update does not migrate the asset folder to the new public folder HOT 4
- @else if and signals narrowing HOT 1
- Standalone component with angular element not working with prod build HOT 1
- Combination of redirecting under a primary route and route guarding a sibling route under a named outlet causes NG04013
- ESBuild (build-angular:application) with ng build --base-href not working as expected HOT 2
- `TestBed.overrideProviders` does not override providers of imported standalone directives HOT 3
- App crash when using ngFor with mapped data and a routerLinkActive directive inside the loop. HOT 2
- FetchBackend expects case sensitive 'Content-Type' HOT 5
- Docs have not the right URL for the image. HOT 1
- Change Behavior of destroyAfterEach or Add Support for destroyBeforeEach Option in TestBed Configuration HOT 2
- Documentation on Content Projection HOT 1
- useValue and useFactory providers throws error when value.constructor is null HOT 1
- Broken link to bootstrapApplication API docs
- 'Must never be called in production mode' HOT 7
- Allow transform functions into input signals HOT 1
- Internal repo tooling: use ESLint instead of the deprecated TSLint 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.