title: Simple keyboard in angular
body: <p>I am trying to make simple keyboard  in angular. I need to enable keyboard when user click on textbox but I am getting permanent keyboard when I am running my application. My code is as follows::</p>
  
  <pre><code>app.component.html:
  
  &lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;div style="text-align:center"&gt;
      &lt;input (input)="onInputChange($event)" class="input" value={{value}} placeholder="Tap on the virtual keyboard to start" /&gt;
      &lt;div class="simple-keyboard"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  app.component.ts:
  
  import { Component, ViewEncapsulation } from "@angular/core";
  import Keyboard from 'simple-keyboard';
  
  @Component({
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: [
      '../../node_modules/simple-keyboard/build/css/index.css',
      './app.component.css'
    ]
  })
  export class AppComponent {
    value = '';
    keyboard: Keyboard;
  
    ngAfterViewInit() {
      this.keyboard = new Keyboard({
        onChange: input =&gt; this.onChange(input),
        onKeyPress: button =&gt; this.onKeyPress(button)
      });
    }
  
    onChange = (input: string) =&gt; {
      this.value = input;
      console.log('Input changed', input);
    };
  
    onKeyPress = (button: string) =&gt; {
      console.log('Button pressed', button);
  
      /**
       * If you want to handle the shift and caps lock buttons
       */
      if (button === '{shift}' || button === '{lock}') this.handleShift();
    };
  
    onInputChange = (event: any) =&gt; {
      this.keyboard.setInput(event.target.value);
    }
  
    handleShift = () =&gt; {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";
  
      this.keyboard.setOptions({
        layoutName: shiftToggle
      });
    };
  }
  </code></pre>
  
  <p>The output I am getting is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/BlzHg.png" rel="nofollow noreferrer">output_keyboard</a></p>
  
  <p>Application is loaded with keyboard. But I want that when I click on text box then keyboard should be enabled. How I can do  that?</p>