Is it possible to bind input to two variables at the same time in Angular?

You can use pipes to display the model transformed by digitGroup function without changing the model.

@Pipe({name: 'groupDigits'})
export class DigitGroupPipe implements PipeTransform {
  transform(value: any) {
      // Call your digitGroup() function here, then return result
  }
}

Then use them like this:

<input matInput [ngModel]="model.property | groupDigits" (ngModelChange)="model.property=$event" />

That way, your model will not be mutated by your digitGroup() function, only on the view

As Jed Cua said, you should be able to do it with pipe. But you can also do it manually with a local variable, having the local variable for user display and model property for calculations.

1. In your component, init a local variable modelPropertyRaw modelPropertyRaw = digitGroup(model.property) in ngOnInit
2. Bind input to local variable modelPropertyRaw
3. Add (input)="onPropertyChange($event.target.value)" to your input
4. In onPropertyChange, do model.property = undigitGroup(modelPropertyRaw)

This separate true value from shown value.

EDIT: In your .html file

<!-- Replaced (ngOnModelChange) by (input). Notice that you are not forced to pass the event for the behavior we want -->
<input matInput [ngModel]="modelPropertyRaw" (input)="onPropertyChange($event.target.value)" />

In your .ts file

Add a local variable modelPropertyRaw (you can also add it as an attribute of your model class)

modelPropertyRaw: string;

Add onPropertyChange function like this

onPropertyChange(inputText: string)
{
  model.property = undigitGroup(modelPropertyRaw);
}

That's it ! If you don't want component local variable, add propertyRaw as an attribute of model and use it instead of modelPropertyRaw in this code