How can I access the value of class member in event listener?

Question

In following example I can't access the value of hint from getSubDiv() function. How can I access the value of hint?

export class UserComponent implements OnInit {    
  hint = "hi santu";

  constructor() { }

  ngOnInit() {    
  }

  creatediv() {   
    console.log("hello");    
    const maindiv = document.createElement("div");    
    const inp = document.createElement("input");    
    inp.setAttribute('type', 'button');    
    inp.setAttribute('value', 'Show');    
    maindiv.appendChild(inp);    
    // inp.type = "button";   
    // inp.value = "click me";    
    inp.onclick = this.getSubDiv;    
    const first = document.getElementById('first');    
    first.appendChild(maindiv);     
  }

  getSubDiv(e) {     
    const show_name = document.createElement('div');   
    show_name.innerText = "Santanu";    
    console.log(this.hint);    //here this.hint can't access
  }    
}