Is Origami required to support Two Way Binding for Angular?

[katansapdevelop]

Issue Description

The current recommendation by UI5 Web Components when using Angular for Two Way Binding is you must use the Origami library. The Origami library has not been maintained for some time now, based on the current commit history.

I copied the Angular demo app for two-way binding and adapted it to use UI5 Web Components and it works fine (See here).

Is there someone specific need for Origami? If there is, could it be qualified in the documentation or otherwise could the documentation be updated to reflect this please? Additionally, if Origami is required, given the potential lack of ongoing support, is there a strategic direction to address this?

Issue Type

• [ ] Documentation is unclear
• [ ] Documentation is incorrect
• [ ] Documentation is missing
• [X] Other

[MapTo0]

Dear @SAP/ui5-webcomponents-core

Seems like Angular team has done some additional work on the two way databinding of custom properties. I check author's example and it is running fine.

We need to check what has been done on the topic and in case that feature is added to the framework

• [ ] Adapt documentation
• [ ] Remove redundant code (called a few events to get that running)
• [ ] Adapt sample applications

Regards, Martin

[ilhan007]

Hello @katansapdevelop two-way data binding works for the simplest case, but does not work out of the box for input/form components like the ui5-input.

As the Angular docs suggests (at the bottom of the "Two way data binding section"):

the way to go for form elements is to use NgModel https://angular.io/guide/built-in-directives#ngModel

And consider the following example:

ComponentOverview template where "ngModel" directive is used

<h3>Native input + NgModel</h3>
<section>
    <label for="example-ngModel">[(ngModel)]: {{secret}}</label>
    <input type="text" [(ngModel)]="secret" />
</section>

<h3>UI5 Web Comp ui5-input + NgModel</h3>
<section>
    <label for="example-ngModel">[(ngModel)]: {{secret}}</label>
    <ui5-input type="text" [(ngModel)]="secret"></ui5-input>
</section>

ComponentOverview class with the "secret" value

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})
export class ComponentOverview {
  @Input() secret: string= '';
}

AppModule, decorated with "NgModule" and importing ""FormsModule" to enable usage of "ngModel"

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ComponentOverview } from './overview/ComponentOverview.component';
import { FormsModule} from '@angular/forms'; 
@NgModule({
  declarations: [
    AppComponent,
    ComponentOverview,
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you type in the native input, everything is fine the "secret" field is updated properly, but if you type in the ui5-input - it's not, as shown in the recorded video:

https://user-images.githubusercontent.com/15702139/198264755-6e497925-7841-43da-879a-1924207539a9.mov

We also noticed the lack of support for Origami. And, in that direction we consider providing angular directives/wrappers to enable angular specific features that does not work out of the box for custom elements. But, this is in very early stage, we are doing some PoCs and researches, not to be expected short/mid-term.

[ilhan007]

Hello @katansapdevelop, we have released a new wrapper library around @ui5/webcomponents, called @ui5/webcomponents-ngx to improve the dev experience with Angular. With that you don't need nothing in addition - all Angular features work out of the box.