Accessing template variable of angular-touch-keyboard in component

Question

I am using angular-touch-keyboard component and would like to pop up it on page load. but I get an error: Cannot read properties of undefined (reading 'touchKeyboard')

I have such a template:

<form class="form-signin" [formGroup]="form">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="usercode" class="sr-only">User code</label>
  <div class="login-input">
    <mat-form-field>
        <input formControlName="usercode"
          matInput
          type="text"
          ngxTouchKeyboard
          ngxTouchKeyboardFullScreen
          #touchKeyboard="ngxTouchKeyboard"
          (focus)="touchKeyboard.openPanel()"
          inputmode='numeric'
          readonly="readonly"
        />
        <button 
          mat-icon-button
          matSuffix
          [class.disabled] = "usercode!.invalid || form.get('usercode')!.untouched"
          (click)="signIn()"
        >
          <mat-icon> done </mat-icon>
        </button>
    </mat-form-field>
  </div>
</form>

I have tried to access it via

 @ViewChild('touchKeyboard', { static: true }) touchKeyboard: ElementRef;

  ngAfterViewInit() {
    this.ActivateTouchPannel();
  }

  ActivateTouchPannel() {
      this.touchKeyboard.nativeElement.touchKeyboard.openPanel();
  }

I am surely missing something.