title: Angular 4 / ionic 3 custom attribute directive not working
body: <p>Hi I am trying to focus on a search input field. I have created a directive for that. It hs been exported from directives.module.ts. Also I have directives.module imported into app.module.ts. Whenever I try to use the directive in ion-searchbar it gives the following error. I don't know what am I missing.</p>
  
  <pre><code>Can't bind to 'focuser' since it isn't a known property of 'ion-searchbar'.
  </code></pre>
  
  <blockquote>
    <p>directives.module.ts</p>
  </blockquote>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { FocuserDirective } from './focuser/focuser';
  @NgModule({
      declarations: [FocuserDirective],
      imports: [],
      exports: [FocuserDirective]
  })
  export class DirectivesModule {}
  </code></pre>
  
  <blockquote>
    <p>focuser.ts</p>
  </blockquote>
  
  <pre><code>import {Directive, Renderer, ElementRef} from "@angular/core";
  
  /**
   * Generated class for the FocuserDirective directive.
   *
   * See https://angular.io/api/core/Directive for more info on Angular
   * Directives.
   */
  @Directive({
    selector: '[focuser]' // Attribute selector
  })
  export class FocuserDirective {
  
    constructor(public renderer: Renderer, public elementRef: ElementRef) {}
  
      ngOnInit() {
        //search bar is wrapped with a div so we get the child input
        const searchInput = this.elementRef.nativeElement.querySelector('input');
        setTimeout(() =&gt; {
          //delay required or ionic styling gets finicky
          this.renderer.invokeElementMethod(searchInput, 'focus', []);
        }, 0);
      }
  
  }
  </code></pre>
  
  <blockquote>
    <p>app.module.ts</p>
  </blockquote>
  
  <pre><code>import { DirectivesModule } from '../directives/directives.module';
  
  
  export function provideSettings(storage: Storage) {
  
    return new Settings(storage, {
      option1: true,
      option2: 'Ionitron J. Framework',
      option3: '3',
      option4: 'Hello'
    });
  }
  
  @NgModule({
    declarations: [
      MyApp
    ],
    imports: [
      BrowserModule,
      HttpModule,
      AutoCompleteModule,
      CalendarModule,
      DirectivesModule,
      IonicModule.forRoot(MyApp),
      IonicStorageModule.forRoot()
    ],
    exports: [
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp
    ],
    providers: [
      Api,
      User,
      SplashScreen,
      StatusBar,
      Constants,
      { provide: Settings, useFactory: provideSettings, deps: [Storage] },
      // Keep this to enable Ionic's runtime error handling during development
      { provide: ErrorHandler, useClass: IonicErrorHandler },
      BoxProvider,
      TellersProvider,
      CheckoutProvider,
      CommonProvider,
    ]
  })
  export class AppModule { }
  </code></pre>