Ionic custom directive is Ignored by Angular

Question

I created a custom directive in ionic

ionic g directive directives/time-value

My code is

import { Directive, OnInit, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appTimeValue]',
})
export class TimeValueDirective implements OnInit{

    @Input('appTimeValue') myStyles: any;

    constructor() { 
      console.log("I'm here");
    }
    ngOnInit(): void {
      console.log("I'm here");
  
    }
}

then I tried to use the directive

<ion-input type="text" name="fineColazione" [(ngModel)]="fineColazione" appTimeValue></ion-input>

Ionic is ignoring my directive.

the CLI added the directive in the module declaration

@NgModule({
  declarations: [
    AppComponent,
    TimeValueDirective,
  ],
  entryComponents: [],
  imports: [
    CommonModule,
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    FormsModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

How can I make the directive work?

are you using TimeValueDirective directly inside of the template of AppComponent ? if not - directive should be imported in the Shared module - module which is imported everywhere — Andrei
– Andrei, Commented Feb 15, 2021 at 9:41
CLI added the directive in the main module app.module.ts . I assume is avaliable to all madules. — Roberto Petrilli
– Roberto Petrilli, Commented Feb 15, 2021 at 9:46
no, it doesn't work like that in angular. all declarations are shared only in the module. also the ones in exports section are shared when you are importing the shared module into one of your modules — Andrei
– Andrei, Commented Feb 15, 2021 at 9:53
In my project I have AppModule and then 2 more modules SettingsPageModule and HomePageModule that are lazy loaded but I can't find a SharedModule in the project structure generated by CLI. If I include the directive into the SettingsPageModule nothing changes. — Roberto Petrilli
– Roberto Petrilli, Commented Feb 15, 2021 at 10:01
if this directive is used inside of SettingsPageModule components, then import it there. also use it like [appTimeValue]. you will see not found error in this case, rather just not working directive — Andrei
– Andrei, Commented Feb 15, 2021 at 10:10

Andrei · Accepted Answer · 2021-02-15 10:26:07Z

1

TimeValueDirective should be declared in the same module, as the one that contains the component, which uses that directive. also it is a good practice to make SharedModule with all reusable components/directives/pipes inside of the application and import this module everywhere.

answered Feb 15, 2021 at 10:26

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic custom directive is Ignored by Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related