Best practice maintaining Angular project with Angular Elements

I maintain Angular project, which is a kind of component library / framework, with components that will be reused by other projects. All projects now are written in Angular, but my team's components must be available also for other platforms (eg. React / .NET / plain HTML).

We export components as web agnostic components with Angular Elements. In HTML web components, one can only set string to attributes, so when I need to give array in Angular as input, I would do this:

const dropdownOptions: string[] = ["one", "two"];
...
<app-custom-component [dropdownOptions]="dropdownOptions"></app-custom-component>

In web component I need to pass string like this:

<custom-component dropdown-options='["one", "two"]'></custom-component>

So this is in my component

@Input() public dropdownOptions: Array<string>;                   //for native Angular
@Input('dropdown-options') public dropdownOptionsString: string;  //for other platforms

ngOnInit(): void {
  if (this.dropdownOptionsString) {
    this.dropdownOptions = JSON.parse(this.dropdownOptionsString);
  }
}

What is best practice here? We considered having separate project for Angular and Web Components, but maintaining two separate code bases is problematic.

from Best practice maintaining Angular project with Angular Elements