How to ensure that what is entered in the text is suitable using the angularjs2 text field?

Question

I have 3 text fields in HTML, each of which has an initial width of 30 pixels each. I want to make sure that in case someone enters text in the text so that it exceeds the field width, the width of all three text fields expands to fit the size of the largest text field. What is the best way to do this?

Answer 1

@Component({ selector: 'my-app', styles: [`#size { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; /* Thanks to Herb Caudill comment */ }`] template: ` <div id="size" #size>{{text}}</div> <input #inp [(ngModel)]="text" (ngModelChange)="width=size.clientWidth" [style.width.px]="width > 50 ? width +10 : 60"> `, }) 

Player Link

It uses a hidden <div> , which needs the same font style as the input element, and with each change, the input will be updated according to the size of the hidden <div> that contains the same text.

See Also Calculate Text Width Using JavaScript