I am new in ionic and have a problem with textarea. This is my code:
<textarea [(ngModel)]="userData.aboutme" name="" id="" cols="30" rows="20"
value="{{ about_me}}" style="width:100%; padding: 10px; margin-top: 3px;" >
</textarea>
The problem is that the value is not showing inside textarea. It's show only if i remove the [(ngModel)].
I need help for this thanks a lot
You need to use ion-textarea.
Note: This is just an example.Adjust it as you wish.
Working stackblitz
html
<ion-item>
<ion-textarea placeholder="Tap here"
[(ngModel)]="note" name="note" autocomplete="on" autocorrect="on"></ion-textarea>
</ion-item>
.ts
note: string = "My Default Text";
constructor(public navCtrl: NavController) {
}
on ion-textarea on .html
<ion-item>
<ion-label floating>Content</ion-label>
<ion-textarea #myInput id="myInput" rows="1" maxLength="500"
(keyup)="adjust()" [(ngModel)]="text.content"></ion-textarea>
</ion-item>
On.ts File,
import { Directive, HostListener, ElementRef } from '@angular/core';
@IonicPage()
@Component({
selector: 'page-post-text',
templateUrl: 'post-text.html',
})
@Directive({
selector: 'ion-textarea[autosize]' // Attribute selector,
})
export class PostTextPage {
@HostListener('document:keydown.enter', ['$event'])
onKeydownHandler(evt: KeyboardEvent) {
this.adjust()
}
Text = {} as Text;
constructor(public element:ElementRef) {}
ngAfterViewInit(){
this.adjust()
}
adjust():void {
let textArea =
this.element.nativeElement.getElementsByTagName('textarea')[0];
textArea.style.overflow = 'hidden';
textArea.style.height = 'auto';
textArea.style.height = (textArea.scrollHeight + 32) + "px";
}
}
And you are good to go!