I think I’m missing something very basic here, but I’ve been staring at this for too long. According the docs and everything else I’ve seen, an Angular directive’s @Input() will be accessible on a component as long as it’s explicitly declared on the hostDirectives.inputs of that component. That’s not the behavior I’m seeing. Instead, I get the dreaded Property [propertyName] does not exist on type [componentName] error.

Comment out line #26 on my Stackblitz to see it.

@Directive({
  standalone: true,
})
export class CompositionTestDirective {
  @Input() dataProperty?: string;
}

@Component({
  selector: 'app-composition-test',
  standalone: true,
  template: `<h1> {{dataProperty}} </h1>`,
  hostDirectives: [
    {
      directive: CompositionTestDirective,
      inputs: ['dataProperty'],
    },
  ],
})
export class CompositionTestComponent {
  /* This shouldn't be necessary right? Comment this out and...KABOOM! */
  @Input() dataProperty: string = '';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CompositionTestComponent],
  template: `
    <app-composition-test [dataProperty]="property"/>
  `,
})
export class App {
  property = 'It works!';
}