As @Eric Martinez suggested, you can create a local template variable, and bind the uppercase string to the value property on the input event:
<input type="text" #input (input)="input.value=$event.target.value.toUpperCase()" />
Alternatively, you can make this a directive:
@Directive({
selector: 'input[type=text]',
host: {
'(input)': 'ref.nativeElement.value=$event.target.value.toUpperCase()',
}
})
export class UpperCaseText {
constructor(private ref: ElementRef) {
}
}
To use the directive, specify UpperCaseText
in your component’s list of directives:
directives: [UpperCaseText]
Demo Plnkr