Can't access inputs from host directive to HTML template

In the [docs for Angular host directive](export abstract class SendoutCommunicationStepBaseDirective { ), it's stated that I can use my inputs/outputs in the template like this.

@Component({ ...
template: "ID {{someId}}",
hostDirectives: [ { directive: SomeDirective, inputs: ["someId"] }],
})
export class SomeComponent { ... }

By explicitly specifying the inputs ... consumers of the component with hostDirective can bind them in a template...
​

However, when I try to read someId in the HTML template of the component where the host directive is assigned, I get an error.

NG9: Property 'someId' does not exist on type 'SomeComponent'.
​

The directive is declare like this.

@Directive()
export class SomeDirective { public readonly someId = input.required<string>(); }


When I asked ChatGPT, it started to mumble about the fields to be replicated in the component all over again like below. Also some other weird suggestions. I call hallucination BS on this. Not only would that contradict what Angular docs say. It would also make little sense and create a more evasive boiler plate.

@Input() someId!: string;


Never the less, I'm stuck and not sure how to proceed.

Continue reading...