web-dev-qa-db-fra.com

taille automatique du texte dans angular2

Je travaille sur l'application angular2. j’ai besoin d’autosize textarea. J'essaie de réutiliser angular2-autosize depuis https://github.com/stevepapa/angular2-autosize

A suivi le readme, mais j'obtiens l'erreur ci-dessous

Erreur non capturée: la construction du module a échoué: Erreur: ENOENT: ce fichier ou répertoire n'existe pas, ouvrez 'C:\Utilisateurs\Vipin\SampleApp\module_noeud\angular2-autosize\angular2-autosize.js'.

S'il vous plaît suggérer comment surmonter ce problème.

angulartextareaautosize
4
vipin

Update (15.04.2018) Géré pour le conditionner, il est maintenant disponible en tant que

npm install ngx-autosize

https://github.com/chrum/ngx-autosize

Ancienne réponse :

J'ai eu le même problème aujourd'hui et je l'ai réparé! Veuillez vérifier ma fourchette: https://github.com/chrum/angular2-autosize

Jusqu'à la fusion de PR, essayez:

npm install https://github.com/chrum/angular2-autosize.git --save

Et puis dans votre code, parce que c'est légèrement différent, vous importez juste un module non directif ...

so au lieu de :

import {Autosize} from 'angular2-autosize';

@NgModule({
  ...
  declarations: [
    Autosize
  ]
  ...
})

vous devriez avoir :

import {AutosizeModule} from 'angular2-autosize';

@NgModule({
  ...
  imports: [
    AutosizeModule
  ]
  ...
})
11
chrystian

vous pouvez faire comme ceci sans utiliser le paquet. sa simple

dans le contrôleur comme ci-dessous

autogrow(){
  let  textArea = document.getElementById("textarea")       
  textArea.style.overflow = 'hidden';
  textArea.style.height = '0px';
  textArea.style.height = textArea.scrollHeight + 'px';
}

et en html comme ci-dessous

<textarea id="textarea" (keyup)="autogrow()" ></textarea>
8
tanveer ahmad dar

La réponse légèrement modifiée pour la réponse du navigateur serait d'utiliser @ViewChild 

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoGrow() {
 const textArea = this.textArea.nativeElement;
 textArea.style.overflow = 'hidden';
 textArea.style.height = '0px';
 textArea.style.height = textArea.scrollHeight + 'px';
}

Et dans le HTML ce serait 

<textarea (keyup)="autoGrow()" #textArea></textare>
1
dilantha111

Pourquoi vous avez besoin de plugins pour cela, il est aussi simple que:

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

et

autoGrowTextZone(e) {
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";
}
1
Chtiwi Malek

Je sais que le sujet est assez ancien, mais je change simplement la réponse de tanveer pour entrer également la hauteur maximale.

    import { Directive, ElementRef, OnInit, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appAutoResize]',

})
export class AutoResizeDirective implements OnInit {
  constructor(public element: ElementRef) {
  }
  @Input() maximumHeight: number; // based on pixel
  @HostListener('input', ['$event.target'])
  ngOnInit(): void {
    this.adjust();
  }

  adjust(): void {
    const ta = this.element.nativeElement;
    const maxHeghit = this.maximumHeight;
    ta.style.overflow = 'hidden';
    ta.style.height = 'auto';
    if (ta.scrollHeight <= maxHeghit) { // while current height is less than maximumHeight
      ta.style.height = ta.scrollHeight + 'px';
    } else { // greater than maximumHeight
      ta.style.height = maxHeghit + 'px';
      ta.style.overflow = 'auto';
    }
  }

}

Ainsi, vous aurez le contrôle sur le comportement du style.
J'espère que cela peut aider.

1
Yasin Farmani