Binding not working immediately when value change in Microsoft Edge for Angular 7

Question

In my Angular 7 solution I'm having a problem with data binding in views in Microsoft Edge /other browsers like Opera, Chrome and Mozilla are working properly/. My page contains multiple input elements like textboxes, dropdowns, radiobuttons, datepickers. There is onValueChange trigger on each input element, in controller /.ts file/ these changes are immediately but the view is not updating.

I've added double curly brackets notation to show current values in views, but value is null /or old one/ until you click on next input /but not on each input - only datepicker or dropdown/. When I've tried to check this in other browsers, values are presented right after typing value to input.

I've tried to add multiple polyfills based on angular official site for supported browsers but nothing helped.

Here is my tsconfig.json and polyfills.ts:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
  "es2017",
  "dom"
 ]
 }
 }

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';

// Used for browsers without a native support of Custom Elements
import '@webcomponents/custom-elements/custom-elements.min';

import '@ng-select/ng-select/bundles/ng-select.umd.min';

 import 'web-animations-js';  // run `npm install --save web-animations-js`.

Is there some way how to make this working on Edge?

Answer 1

Try to refer to the following code:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)"><br/>
<span>{{ name}}</span>

.ts file:

export class AboutComponent implements OnInit {

  name:string;

  constructor() { }

  ngOnInit() {
  }
  onSearchChange(searchValue : string ) {  
    console.log(searchValue);
    this.name = searchValue;
  }
}

it works well on my side (Edge 42.17134.1.0), like this:

If still not working, can you post the Enough code to reproduce the problem as in Minimal, Complete, and Verifiable example. And, you could also check the Edge browser version.