How to make inputs behave like React in Angular -

in react when make element <input value={this.valfromstore} /> input locked until store changes. in angular 4 when make input can't seem behavior match. <input [ngmodel]="valfromstore" /> when type input changes value of input. if set valfromstore getter no setter.

is there way inputs tied store on (ngmodel) can update store , let changes cascade out can in react?

update: adding example clarify. in react i'd expect input drop every other key input value of testing show in input etn. in practice want _currentvalue @input read store , handlechange call this.store.dispatch(newvalaction).

import { component, oninit, input, simplechanges } '@angular/core';  @component({   selector: 'field-type-text',   templateurl: './field-type-text.component.html',   styleurls: ['./field-type-text.component.css'] }) export class fieldtypetextcomponent implements oninit {   _currentvalue: any;    constructor() { }    private counter = 0;   handlechange(e) {     if (this.counter++ % 2) this._currentvalue += e[e.length - 1]   }    ngoninit() {    }  } 

html

<input type="text" [ngmodel]="_currentval" (ngmodelchange)="handlechange($event)" />

i believe you're looking split use of ngmodel input , event emitting:

<input [ngmodel]="valfromstore" (ngmodelchange)="callstorechange($event)"> 

in case 'valfromstore' local variable valfromstore set update when external store changes, , callstorechanges($event) local method changes store.

if valfromstore @input valuefromstore need implement onchanges , simplechanges. if it's value observable it's set update on push.

side note: remember if production aot builds want call changes store service inside local component, , not template.