如何让输入框的宽度可以随着文字的长度进行变化

当在input框里输入文字时，希望输入框的宽度可以随着文字的长度进行变化，但是由于中文和英文的，以及字体和大小的不同，会导致文字占的长度是有所差异的，以下代码可以解决这个问题

html
<input type="text" class="edit-name float-left" [(ngModel)]="inputTitle" (input)="setWidthByValue()">

ts部分的逻辑
 public calculateTextWidth(value: string) {
    const style = this.getStyle();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.font = `${style.fontSize}px ${style.fontFamily}`;
    return ctx.measureText(value).width;
  }

  public getStyle() {
    const style = window.getComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-size');
    const fontFamily = window.getComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-family');
    const fontSize = parseFloat(style);
    return {fontFamily: fontFamily, fontSize: fontSize};
  }

  public setWidthByValue() {
    this.titleEle.nativeElement.style.width = this.calculateTextWidth(this.inputTitle) + 12 + 'px';
  }