angular element focus on maxlength code example

Example: maxlength reach focus on next input angular

// For angular with PureJS

//HTML
        <form class="digit-group" #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)" ngNativeValidate>
            <input type="text" maxlength="1" id="digit-1" name="digit-1" />
            <input type="text" maxlength="1" id="digit-2" name="digit-2" />
            <input type="text" maxlength="1" id="digit-3" name="digit-3" />
            <!-- <span class="splitter">&ndash;</span> -->
            <input type="text" maxlength="1" id="digit-4" name="digit-4" />
            <input type="text" maxlength="1" id="digit-5" name="digit-5" />
            <input type="text" maxlength="1" id="digit-6" name="digit-6" />
            <div class="row">
                <div class="col px-0 pt-4 pb-2 text-center">
                    <button type="button" class="btn btn-warning" (click)="dismissModal()">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>

//Typescript
ngOnInit(): void {
    var container = <HTMLInputElement>document.getElementsByClassName("digit-group")[0];
    container.onkeyup = function (e) {
      var target = <HTMLInputElement>e.target;
      var maxLength = parseInt(target.attributes["maxlength"].value, 10);
      var myLength = target.value.length;
      if (myLength >= maxLength) {
        var next = target;
        while (next = <HTMLInputElement>next.nextElementSibling) {
          if (next == null)
            break;
          if (next.tagName.toLowerCase() === "input") {
            next.focus();
            break;
          }
        }
      }
    }
  }