Is there some easy way to keep ui5 webcomponent(for example ui5-input) in sync with model of angular component?

Question

I was trying to use ngModel with a ui5-input field to automatically update my angular model when typing data into the input field but didn't get it to work. Is there an easy way to have an object at the angular side which changes when typing into the ui5-input web component?

What I've tried is:

<ui5-input id="ui5Input" 
required 
[(ngModel)]="ui5Val" name="ui5Val"
>
</ui5-input> {{ui5Val}}

Or can webcomponents never be form controls in terms of angular and I should write a wrapper component for each ui5 form element?

I found this article and successfully implemented a custom form control where the synchronization works perfectly:

Build a custom form control: https://medium.com/joolsoftware/creating-a-custom-formcontrol-in-angular-da92f2f47733

Answer 1

add "ngDefaultControl" attribute

<ui5-input  id="ui5Input" required ngDefaultControl [(ngModel)]="ui5Val" name="ui5Val" ></ui5-input>