Angular Dynamic component with custom directive

Question

I have created a Dynamic component in Angular 13, i have put the directive inside the html of dynamic component but the directive or component or variables are not working.

My Code

Parent Component :

createComponent(id) {
   let _element = $("#elementId")[0];
   let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
   let component: ComponentRef<any> = componentFactory.create(this.viewContainerRef.injector, null, _element);
}

Child Component :

@Component({
    templateUrl: '../view/child.component.html'
})

export class ListNode {
    test_var:any = "test"; <-- This is not displaying in html
    
    constructor() {
        console.log("child");
    }

    test() {
        console.log(this.test_var); <-- Here i get variable perfectly
    }
}

Child Html :

<div>
    <div class="my_class">Child Component</div>
    <div class="my_class_2">
        {{test_var}} <-- Var not displaying here
        <select class="text" [myDirective/myComponent]> <-- Here directive is not loaded
            <option></option>
            <option>Abc</option>
            <option>Xyz</option>
        </select>
        <button (click)="test()">Abc</button> <-- this fuction works fine with variables
    </div>
</div>