angular / angular/angular

Allow host binding to feed inputs to host directives

Open
#50,510 43 comments 144 reactions 0 assignees View on GitHub
area: core core: host directives
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### Which @angular/* package(s) are the source of the bug?

core

### Is this a regression?

No

### Description

If a directive (let's named it `ReusableDirective`) exposes a required input (`foo`), and is used as a host directive by another directive (`ComposedDirective`), then the compiler forces the composed directive to expose the required input.

This is problematic when the whole point of the composed directive is precisely to provide a default or computed value for the required input.

For example:

```ts
@Directive({
selector: '[app-reusable]',
standalone: true,
})
class ReusableDirective {
@Input({ required: true }) foo!: string;

// do something useful with foo here, but that's irrelevant
}

@Directive({
selector: '[app-composed]',
standalone: true,
hostDirectives: [ReusableDirective],
})
class ComposedDirective {
constructor(reusable: ReusableDirective) {
reusable.foo = 'hello';
}
}
```

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-85nxmu?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=src%2Fmain.ts&title=Angular%20Starter

### Please provide the exception or error you saw

```
Required input 'foo' from host directive ReusableDirective must be exposed.
```

### Please provide the environment you discovered this bug in (run `ng version`)

```
Angular CLI: 16.0.2
Node: 18.16.0
Package Manager: yarn 1.22.19
OS: darwin x64

Angular: 16.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.2
@angular-devkit/build-angular 16.0.2
@angular-devkit/core 16.0.2
@angular-devkit/schematics 16.0.2
@angular/cdk 16.0.1
@schematics/angular 16.0.2
rxjs 7.8.1
typescript 5.0.4
```

### Anything else?

This just hit me in a real situation: ng-bootstrap's typeahead directive's `ngbTypeahead` input is marked as requird in the latest version, and we have several custom `fooTypeahead` and `barTypeahead` directives which simply use ngbTypeahead as a host directive and provide this required input.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and trace the Angular core compiler path that emits “Required input 'foo' from host directive ReusableDirective must be exposed.” Compare required-input handling for host directives with the composed-directive example. Done means a composed directive can provide a default or computed value for a required host-directive input without exposing it, while the existing required-input behavior remains correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.