Ionic 3 Directive Not Working

Question

I've been trying to create a directive in ionic and its just not working and i dont seem to know why. I want the directive to allow have the ability to auto resize itself. So when it has more text it just keeps resizing.

This is my code: And my project is an ionic 3 project which is using angular 4, the new version.

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

@Directive({
  selector: '[auto-resize-text-input]' // Attribute selector
})
export class AutoResizeTextInput {
  constructor(public elem: ElementRef) {
    console.log('Hello AutoResizeTextInput Directive');
  }

  @HostListener('input', ['$event.target']) onInput() {
    this.resizeTextOnInput();
  }

  private resizeTextOnInput() {
    this.elem.nativeElement.style.overflow = 'hidden';
    this.elem.nativeElement.style.height = 'auto';
    this.elem.nativeElement.style.height = this.elem.nativeElement.scrollHeight + "px";
  }
}

Please help ????

Answer 1

I had the same problem. The directive wasn't recognized by the app, but it didn't give any errors. So I removed it from main modules' decalarations and added to the page module' decalarations, which uses the directive and the problem is gone.

Answer 2

If you were like me and needed this Directive across multiple components here's how I solved it.

Create a shared DirectiveModule named directives.module.ts in the same folder as your app.module.ts file and add your Directive you are trying to use under declarations:[] and exports:[]:

import { NgModule } from '@angular/core';
import { SomeDirective } from './some.directive';

@NgModule({
  declarations: [SomeDirective],
  exports: [SomeDirective]
})
export class DirectivesModule {}

Now import the shared directive module in the modules you need it:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SomePage } from './some';
import { DirectivesModule } from '../../app/directives.module';

@NgModule({
  declarations: [
    DashboardPage
  ],
  imports: [
    IonicPageModule.forChild(SomePage),
    DirectivesModule
  ]
})
export class SomePageModule {}

I couldn't find the answer I was looking for anywhere else, hope it helps.