JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as myCtrl">
  <textarea row="4" col="50" ng-model="myCtrl.myText" on-keyin when-enter="myCtrl.clearText()"
            show-key-code="myCtrl.showKeyin(keyCode, key)"></textarea>
  <div>
    <span>KeyCode: </span><span ng-bind="myCtrl.keyin"></span>
  </div>
    <div>
    <span>Key: </span><span ng-bind="myCtrl.character"></span>
  </div>
</div>

JavaScript

angular.module("myApp", [])
  .directive("onKeyin", function() {
    return {
      restrict: "A",
      scope: {
      	whenEnter: "&",
        showKeyCode: "&"
      },
      link: function(scope, element, attr) {
				element.on("keypress", function(e){
        	
        	scope.$apply(function(){
          	scope.showKeyCode(e);
          });
        
        	if (e.keyCode === 13) {
          	e.preventDefault();
            
            scope.$apply(scope.whenEnter);
          }
        });
      }
    };
  })
  .controller("myController", [function() {
    var self = this;
    
    self.clearText = function(){
    	self.myText = "";
    };
    
    self.showKeyin = function (input, letter){
    	self.keyin = input;
      self.character = letter;
    };
  }]);