auto adjusting textarea

lohanidamodar · lohanidamodar · commit 54715b03c0cd · 2017-04-24T11:20:57.000+05:45
diff --git a/src/app/app.imports.ts b/src/app/app.imports.ts
@@ -90,6 +90,7 @@ import { BarcodescannerPage } from '../pages/miscellaneous/barcodescanner/barcod
 import { ExpandableHeaderPage } from '../pages/miscellaneous/expandable-header/expandable-header';
 import { FlashCardPage } from '../pages/miscellaneous/flash-card/flash-card';
 import { SideMenuPage } from '../pages/side-menu/side-menu';
+import { AutosizingTextarea } from '../pages/miscellaneous/autosizing-textarea/autosizing-textarea';
 
 // Providers
 import { WeatherService } from '../pages/miscellaneous/weather/weather.service';
@@ -108,6 +109,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 
 // Directives
 import { SlidingDrawer } from '../components/sliding-drawer/sliding-drawer';
+import { Autosize } from '../components/autosize/autosize';
 
 // Components
 import { Timer } from '../components/countdown-timer/timer';
@@ -204,6 +206,7 @@ export const Pages = [
     FlashCardPage,
     BarcodescannerPage,
     ExpandableHeaderPage,
+    AutosizingTextarea,
 
     // Modals
     PopupModalsPage,
@@ -261,4 +264,5 @@ export const Directives = [
     SlidingDrawer,
     Timer,
     TypingEffect,
+    Autosize,
 ]
diff --git a/src/components/autosize/autosize.ts b/src/components/autosize/autosize.ts
@@ -0,0 +1,26 @@
+import {ElementRef, HostListener, Directive, OnInit} from '@angular/core';
+
+@Directive({
+  selector: 'ion-textarea[autosize]'
+})
+
+export class Autosize implements OnInit {
+  @HostListener('input', ['$event.target'])
+  onInput(textArea:HTMLTextAreaElement):void {
+    this.adjust();
+  }
+
+  constructor(public element:ElementRef) {
+  }
+
+  ngOnInit():void {
+    setTimeout(() => this.adjust(), 0);
+  }
+
+  adjust():void {
+    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
+    textArea.style.overflow = 'hidden';
+    textArea.style.height = 'auto';
+    textArea.style.height = textArea.scrollHeight + "px";
+  }
+}
diff --git a/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.html b/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.html
@@ -0,0 +1,14 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Autosizing Textarea</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <ion-item>
+    <ion-textarea name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
+  </ion-item>
+</ion-content>
diff --git a/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.scss b/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.scss
@@ -0,0 +1,3 @@
+page-autosizing-textarea {
+
+}
diff --git a/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.ts b/src/pages/miscellaneous/autosizing-textarea/autosizing-textarea.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+
+@Component({
+  selector: 'page-autosizing-textarea',
+  templateUrl: 'autosizing-textarea.html',
+})
+export class AutosizingTextarea {
+  dummyText: string = 'Hello I am autosizing textarea. I automatically adjusts to accommodate my content. I increases and decreases my size based on my content. Try by removing few lines or adding few new lines of text to see what I am able to do.';
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    
+  }
+
+}
diff --git a/src/pages/miscellaneous/miscellaneous.ts b/src/pages/miscellaneous/miscellaneous.ts
@@ -14,6 +14,7 @@ import { TinderCardsPage } from './tinder-cards/tinder-cards';
 import { Component } from '@angular/core';
 import { RuntimePermissionsPage } from './runtime-permissions/runtime-permissions';
 import { ExpandableHeaderPage } from './expandable-header/expandable-header';
+import { AutosizingTextarea } from './autosizing-textarea/autosizing-textarea'
 
 import { NavController, MenuController } from 'ionic-angular';
 
@@ -79,6 +80,10 @@ export class MiscellaneousListPage {
                 title: 'Expandable Header',
                 page: ExpandableHeaderPage
             },
+            {
+                title: 'Autosizing Textarea',
+                page: AutosizingTextarea
+            }
             // {
             //     title: 'Weather',
             //     page: WeatherPage

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+page-autosizing-textarea {`
	`2`	`+`
	`3`	`+}`