2

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.

Giannis
  • 1,790
  • 1
  • 11
  • 29
Tschareck
  • 4,071
  • 9
  • 47
  • 74
  • 1
    Have you actually tried to make this work when used in React? Any components that do DOM updates or use the native Eventloop won't work in React **unless** you write a React wrapper (for every component) React fails in 29% of Custom Element tests: https://custom-elements-everywhere.com/libraries/react/results/results.html **React only for 71% supports the W3C Standard** set by all Browser vendors. So it kinda is Facebook against the whole world... but hey! Once Flash was installed on every device. – Danny '365CSI' Engelman Oct 10 '20 at 08:54
  • I think it's better seperate code bases by platforms. Maybe Ionic framework's structure can give you some ideas. It's a hybrid app framework available in Angular/React/Vue: https://github.com/ionic-team/ionic-framework – Frank Oct 14 '20 at 03:23

0 Answers0