Update input value on keyboard event - Angular2

Question

We need to develop tutorial app for braille language.

We have an input, when user keypress "df" on document ready, we need to update value of input to "b".

<input type="text" [value]="letter" readonly>

export class ExercisesComponent {

letter:string;

constructor(private router: Router, private exerciseService: ExerciseService, private route: ActivatedRoute) {}


ngOnInit(): void {
    this.showKey();
}

showKey(event: any) {
    let map = {};
    self = this;
    onkeydown = onkeyup = function(e){
        e = e || event;
        map[e.keyCode] = e.type == 'keydown';
        if( map[68] && map[70]) {
            console.log('Keypress D + F ');
            self.letter = 'b' // Should print letter 'b' in input
        }
    }
}  }

When we press "d+f" we need to update input value in real time mode with two way binding.

This code above will update input value to "b", only when we focused to input and leave focus state.

UPD: Here is a Plunker demo: https://plnkr.co/edit/Xqotggv4xjk5jgsaVHYS?p=preview

Question is how we can update this value when keyboard event was triggered in real time mode?

yurzui · Accepted Answer · 2016-09-23 11:39:40Z

2

Try this:

map = {};
@HostListener('document:keyup', ['$event'])
@HostListener('document:keydown', ['$event'])
keUp(e) {
  this.map[e.keyCode] = e.type == 'keydown';
  if( this.map[68] && this.map[70]) {
    console.log('Keypress D + F ');
    this.letter = 'b' // Should print letter 'b' in input
  }
}

Plunker Example

answered Sep 23, 2016 at 11:39

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jean Neveux · Accepted Answer · 2016-09-23 11:08:32Z

0

To do two way binding in a custom component you'll need to use an NG_VALUE_ACCESSOR and implement the interface ControlValueAccessor. Then you can use a call back to update the value. Here is a sample here http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

Jean

answered Sep 23, 2016 at 11:08

Jean Neveux

474 bronze badges

Collectives™ on Stack Overflow

Update input value on keyboard event - Angular2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related