Clever Geek Handbook

Ionic 3 directive not working

I'm trying to create a directive in ionic and it just doesn't work and I don't seem to know why. I want the directive to be able to be automatically resized. So when it has more text, it just keeps the size.

This is my code: And my project is an ionic 3 project that uses angular 4, newer 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????

+3


source to share


3 answers


I had the same problem. The directive was not recognized by the application, but it did not give any errors. So I removed it from the main modules decalarations

and added it to the page module decalarations

that uses the directive and the problem went away.



+4


source


if you put your directive file in components folder. here's the answer:



move the file from components/your-directive

to directives/your-directive

then restore it. Good luck!

0


source


maybe this will help you:

If you are using directives in a component, import directives.module.ts

in app.module.ts

and components.module.ts

or just import it app.module.ts

to use your directive on the page.

0


source






More articles:


All Articles