Angularjs2 metin kutusundan nasıl emin olunur giriş metne sığar?

Question

HTML'de 3 tane metin kutusu var, her birinin her biri 30px'lik bir başlangıç ​​genişliğine sahip. Bunu yapmak istiyorum ki, birisi metin kutusundan birine girdiğinde, kutunun genişliğini aşacak şekilde metin kutusuna girerse, üç metin kutusunun genişliği en büyük metin kutusunun boyutuna uyacak şekilde genişler. Bunu yapmanın en iyi yolu nedir?

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"> 
    `, 
}) 

Plunker link

O kullanan bir giriş elemanı olarak ve her giriş aynı içeren gizli <div> boyutuyla eşleşecek şekilde güncellenir değiştirmek aynı yazı tipi stili ihtiyacı <div> gizli Metin. Ayrıca bkz. Calculate text width with JavaScript