Ionic 3 Directive not working with ionic2-autosize

Question

I am using Ionic, and have a ion-textarea i would like to auto size, i.e. expand as the user adds more text. I have found ionic2-autosize, which is a directive. However, I cannot seem to make this directive have any effect on my ion-textarea, i.e. it does not expand as the user adds more text.

I run:

npm install --save ionic2-autosize

package.json

"ionic2-autosize": "^1.1.1",

app.module.ts

import {Autosize} from 'ionic2-autosize';

@NgModule({
  declarations: [
    MyApp, Autosize
  ],
...

review.ts

<ion-textarea autosize [(ngModel)]="ratingModel.review" formControlName="review" id="review"></ion-textarea>

As you can see, I add the autosize attribute to the ion-textarea, but this has no effect, it behaves like a regular ion-textarea with only a height of 2 lines. I would expect the height to expand dynamically.

Any help appreciated.

More info:

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

UPDATE

I add the AutosizeModule to my module:

review.module.ts

import {AutosizeModule} from 'ionic2-autosize';

@NgModule({
  declarations: [ReviewPage],
  imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule, AutosizeModule],
  exports: [ReviewPage]
})
export class ReviewPageModule { }

But get this error:

ERROR Error: Uncaught (in promise): Error: Type Autosize is part of the declarations of 2 modules: AppModule and AutosizeModule! Please consider moving Autosize to a higher module that imports AppModule and AutosizeModule. You can also create a new NgModule that exports and includes Autosize then import that NgModule in AppModule and AutosizeModule.

UPDATE

I removed it from the app.module.ts, and it seems to have fixed the above error. However, now I get:

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

UPDATE

Rather used CommonModule:

review.module.ts

//import {AutosizeModule} from 'ionic2-autosize';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ReviewPage],
  imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule, CommonModule],
  exports: [ReviewPage]
})
export class ReviewPageModule { }

app.module.ts

import { AutosizeModule } from 'ionic2-autosize';
...
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule,
    AutosizeModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicStorageModule.forRoot()
  ],

The errors went away, but the ion-textarea still does not autosize.

Hi Pengyy, nope I haven't. Where do I get AutosizeModule from? I was not aware I had to import it? Is it part of ionic2-autosize? — Richard
Thanks, I think I understand, however, please see my UPDATE above. I added the AutosizeModule, but am getting an error. — Richard
Thanks, I now replaced AutosizeModule with CommonModule in my review.module.ts. I now get no errors. But I am back to square one, the ion-textarea does not autosize. — Richard
Nope, but I have just added AutosizeModule back to app.module.ts, and there is no errors, but also no autosizing. — Richard

misha130 misha130 · Accepted Answer · 2017-05-17T08:56:04

I created a pull request on his git and hopefully he'll fix it. All you need to do for this to work is to remove BrowserModule.

The BrowserModule is needed for projects that are the whole project. Small NgModules if need be(ngIf, ngFor, ngClass, etc) require CommonModule.

In Ionic3 its a rule that only the top most @NgModule will have the BrowserModule.

For reference https://github.com/misha130/ionic2-autosize/commit/3b40925dca104ec76fe55b4af3a726efb7e3efbe

Ionic 3 Directive not working with ionic2-autosize

1 Answers