ngModelChange not fired and ngModel doesn't work for custom webcomponents (Angular Elements)

🐞 bug report

Affected Package

The issue is caused by package @angular/elements and/or @angular/forms

Is this a regression?

No.

Description

I created a webcomponent of a custom form field (with NG_VALUE_ACCESSOR), and I wanted to read the value out of it. The way how I tried:

const customElement = document.createElement('custom-field');
customElement.addEventListener('ngModelChange', function(event: CustomEvent) {
    console.log(event.detail);
});

I would expect an EventEmitter Output named as ngModelChange as it works for the rest of Angular. I don’t want to add a custom output to keep the codebase clean and standard as we use the same component both inside and outside Angular (and we have a lot of custom form fields). (Same for ngModel, I would expect to use ng-model to write value inside.)

🔬 Minimal Reproduction

https://github.com/merobal/angular-elements-issue

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.8
Node: 10.15.3
OS: linux x64
Angular: 7.2.13
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.8
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.8
@angular-devkit/schematics        7.3.8
@angular/cdk                      7.3.7
@angular/cli                      7.3.8
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.8
@schematics/update                0.13.8
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

Honestly, I’m not sure if it’s a bug report or a feature request, but I expect a behavior which is not presented.

[robwormald]

ngModelChange and friends are specific to Angular, and specifically for Angular Directive communication. If you’re using this to create reusable form controls for use outside of Angular, ngModelChange is not something the consumer should have to know about.

Depending on the type of form control you’re building, your best bet is to expose an @Output() with the name 'input' (confusing, I know…) - this is how the vast majority of native form controls work - see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

To use this in an Angular Form, you then want a ControlValueAccessor to match - you can use the ngDefaultControl.

[AlexGS74]

Your component doesn’t expose such event, so it doesn’t work.