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 ????
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.
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.
if you put your directive file in components folder. here is answer:
move your file from
components/your-directive
to
directives/your-directive
then rebuild it. Good luck!