<div [myAttrDirective]="param"></div>

import {
Directive,
Input,
ViewContainerRef,
ComponentRef,
ComponentFactoryResolver,
} from "@angular/core";
import { MyComponent } from "./my-component";

@Directive({ selector: "[myAttrDirective]" })
export class AttrDirective {
@Input()
public set AttrDirective(attrDirective: any) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
MyComponent,
);

attrDirective.forEach((element, index) => {
const componentRef: ComponentRef<
MyComponent
> = this.viewContainer.createComponent(factory);

const myComponent: MyComponent = componentRef.instance;
myComponent.setInformation({ element });
});
}

constructor(
   private viewContainer: ViewContainerRef,
   private componentFactoryResolver: ComponentFactoryResolver,
) {}
}

<div *myStrDirective="params"></div>

import {
Directive,
Input,
ViewContainerRef,
ComponentRef,
ComponentFactoryResolver,
} from "@angular/core";
import { MyComponent } from "./my-component";

@Directive({ selector: "[myStrDirective]" })
export class StrDirective {
@Input()
public set StrDirective (strDirective : any) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
MyComponent,
);

strDirective .forEach((element, index) => {
const componentRef: ComponentRef<
MyComponent
> = this.viewContainer.createComponent(factory);

const myComponent: MyComponent = componentRef.instance;
myComponent.setInformation({ element });
});
}

constructor(
   private viewContainer: ViewContainerRef,
   private componentFactoryResolver: ComponentFactoryResolver,
) {}
}