I have a problem when I access the directive via View Child, I get an error that it is undefined

1. shared

   • filter-type
     • filter-type.component.ts
     • filter-type.component.html
   • nav
     • nav.component.ts
     • nav.component.html
     • nav.component.scss

2. stats

   • cases
     • cases.component.ts
     • cases.component.scss
     • cases.component.html filter.directive.ts

Filter Directive

@Directive({
  selector: '[derFilterRef]'
})
export class FilterRefDirective {
  constructor(public containerRef: ViewContainerRef) {}
}

Cases Component HTML

<ng-template derFilterRef></ng-template>

Nav Component TS

@Component({
  selector: 'stats-nav-bar',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  @ViewChild(FilterRefDirective, { static: false }) refDir!: FilterRefDirective;

  constructor(private resolver: ComponentFactoryResolver) {}


  openStrokeFilter() {
    const modalFactory = this.resolver.resolveComponentFactory(FilterTypeComponent);
    console.log(this.refDir);
    this.refDir.containerRef.clear();
    this.refDir.containerRef.createComponent(modalFactory);
  }
}

Nav Component HTML

<button (click)='openStrokeFilter()' class='w-100'>Stroke Type</button>

I think it's about View Child because it returns undefined, because I'm not looking for it inside the component, but in another module