Having issues getting #ContentChild working with Directive - angular7

Question

I've been trying to get ContentChild with Directive working in a demo/example and I keep running into the directive not working. No errors being thrown. I've replicated the scenario on StackBlitz and I'm getting the same problem: https://stackblitz.com/edit/angular-contentchild-directive-etktcd
Why am I still getting "undefined" for the child input?
Here is the Directive:
import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, forwardRef, AfterContentInit} from '#angular/core';
import { AbstractControl } from '#angular/forms';
import { FocusDirective } from '../directive/focus.directive';
#Component({
selector: 'field-validation',
template: `
<ng-content></ng-content>
`
})
export class FieldValidationComponent implements OnInit, AfterContentInit {
#ContentChild(FocusDirective) input: FocusDirective;
ngOnInit(): void {
console.log("ngOnInit::input is: ", this.input);
// this.input.focusChange.subscribe((focus) => {
// this.updateAttributes();
// });
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit::input is: ", this.input);
}
}
Here is the child Component:
import { Component, Directive, Input, ContentChild, OnInit, OnDestroy,
forwardRef, AfterContentInit} from '#angular/core';
import { AbstractControl } from '#angular/forms';
import { FocusDirective } from '../directive/focus.directive';
#Component({
selector: 'field-validation',
template: `
<ng-content></ng-content>
`
})
export class FieldValidationComponent implements OnInit, AfterContentInit {
#ContentChild(FocusDirective) input: FocusDirective;
ngOnInit(): void {
console.log("ngOnInit::input is: ", this.input);
// this.input.focusChange.subscribe((focus) => {
// this.updateAttributes();
// });
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit::input is: ", this.input);
}
}
Here is the HTML in the parent app:
<form [formGroup]="testForm">
<field-validation>
<input type="text" placeholder="0.00">
</field-validation>
<div>
<button type="submit">FAKE SUBMIT</button>
</div>
</form>

Answer 1

Please add the FocusDirective class to declaration property of AppModule, as shown below.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FieldValidationComponent } from './child-component/field-validation.component';
import { RxReactiveFormsModule } from '#rxweb/reactive-form-validators'
import { FocusDirective } from './directive/focus.directive';
#NgModule({
imports: [ BrowserModule, ReactiveFormsModule, RxReactiveFormsModule],
declarations: [ AppComponent, HelloComponent, FieldValidationComponent, FocusDirective],
bootstrap: [ AppComponent ]
})
export class AppModule { }