Hello, I am currently working on implementing a search input field focus using a directive that has been exported from directives.module.ts. The directives.module is properly imported into the app.module.ts file. However, when attempting to use the directive in an ion-searchbar, I encounter the following error message. I am unsure of what I might be overlooking.
Can't bind to 'focuser' since it isn't a known property of 'ion-searchbar'.
directives.module.ts
import { NgModule } from '@angular/core';
import { FocuserDirective } from './focuser/focuser';
@NgModule({
declarations: [FocuserDirective],
imports: [],
exports: [FocuserDirective]
})
export class DirectivesModule {}
focuser.ts
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(() => {
//delay required or ionic styling gets finicky
this.renderer.invokeElementMethod(searchInput, 'focus', []);
}, 0);
}
}
app.module.ts
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 { }