How to correctly transfer Children to the Angular Directive

I'm trying to pass all FormGroups that are in childrens to my directive. Why are they not transmitted?

I tried using @ViewChildren and @ContentChildren but the result is undefined

<div block="tab" [class.is-active]="toggleGroup.value === 'output'" fieldGroupValidation>
<app-rubric-theme-date></app-rubric-theme-date>
<app-authors></app-authors>
</div>


@Directive({
selector: '[fieldGroupValidation]'
})
export class FieldGroupValidationDirective implements OnInit, OnDestroy {
@ViewChildren(FormGroup) controls: QueryList<FormGroup>;
constructor(

) {}

ngOnInit() {
// console.log('contorls', this.controls);
// console.log('controls names: ', this.controls);
}

ngAfterViewInit() {
console.log('contorls', this.controls);
}



There are form groups inside the components in the template.

Continue reading...