Ionic 3 - Directive Not Working


I puted on my code a Directive of autofocus to the input, but it ins’t working.
The code:

// app.module.ts
import { Focuser } from "../components/focuser/focuser";
  declarations: [
import {Directive, Renderer, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
    selector: '[focuser]' // Attribute selector
export class Focuser {
    constructor(private renderer:Renderer, private elementRef:ElementRef, private keyboard: Keyboard) {
    ngAfterViewInit() {
        const element = this.elementRef.nativeElement.querySelector('input');
        // we need to delay our call in order to work with ionic ...
        setTimeout(() => {
            this.renderer.invokeElementMethod(element, 'focus', []);
        }, 0);
<input #input focuser type="text"/>


Hi friend!
move your file from




then rebuild it. Good luck!


Same problem here. I did like you @HugoPetla .

And my directive is in ‘directives’ folder.



Solved here.


export class Focuser { @input focuser; // code omitted }


Not to be crude, but all this lacks the node firebase native component, aka:

import {Directive, Renderer, ElementRef, OnInit, ViewChild } from ‘@angular/core’;
import { Keyboard } from ‘@ionic-native/keyboard’;
import firebase from firebase

If you try to call it with no npm --save hence part of the problem (this plugin doesn’t need to be called in app.module.ts if well setup in app).


@yuricamara nice! Thx for your support!
I solved it before(Idk if it’s the right way), using on my ionViewDidEnter():

setTimeout(() => {
        }, 300);

and changed the html:

<input id="input" type="text"/>

But I will try your solution too. Thx again.


I implore people to never ever call setTimeout(). It is an invitation for difficult to reproduce, test, and fix bugs.


Hi All,

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


"ionic2-autosize": "^1.1.1",


import {Autosize} from 'ionic2-autosize';

  declarations: [
    MyApp, Autosize


<ion-textarea autosize [(ngModel)]="" 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


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


It’s looks like ionic2-autosize is not compatible with Ionc3 for now.



I have used fz-elastic before with good results.


Thanks fz-elastic works for me.


Since I added fz-elastic, I am however experiencing some strange behaviour. This only happens on a device, and not in a browser.

I have a form with anion-input and two ion-textarea's. If I input a number of rows of data into a ion-textarea, and then scroll to the bottom of the page, where I have a submit button, it automatically scrolls back up to the ion-textarea, so that I cannot click the button.

I even remove focus from the ion-textarea by clicking on a ion-radio I have just above the button, but it still just scrolls after a few milliseconds back up to the ion-textarea.

Has anyone else experienced this? Any ideas?