Ionic-v4 attribute directive not working

Ionic Framework
1

I have created a simple directive that works in an angular demo app according to the guide here.

The appHighlight directive works in Angular, but does nothing when applied in a new blank Ionic-v4 app.

Here are the steps I took to create this ionic project:

  1. ionic start directiveTest blank --type=angular
  2. ionic generate directive Highlight
  3. imported ElementRef from ‘@angular/core’ and injected into HighlightDirective constructor as shown below.
  4. set ElementRef.nativeElement.style.backgroundColor = ‘yellow’ inside the directive constructor
  5. checked to make sure HighlightDirective was declared in app.module.ts
  6. added ‘appHighlight’ to

    tag in home.page.html

Should this work, or am I missing something? Thanks!

highlight.directive.ts:

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})

export class HighlightDirective {
  constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'yellow';
  }
}

app.module.ts:


@NgModule({

  declarations: [AppComponent, HighlightDirective],

  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.page.html:

<ion-content padding>
  The world is your oyster.
  <p appHighlight> test </p>
</ion-content>
1 Like
2

Did you ever get this working? I’m experiencing the same behavior. Did you submit a bug on github?

3

Nevermind - found the issue + workaround here:

Looks like since everything is now lazy loaded, directives also need to have a DirectiveModule generated that injects the directive, and that needs to then be imported everywhere the directive is used, So the actual bug may be that ionic g directive needs to generate a module for the directive too.

It seems that a custom directive will work if declared on a page which uses it directly or imported from a module on a page directly but NOT when it is declared in app.module.ts or imported as a module into app.module.ts … :frowning: …

Current workaround is to put the directives into a common module and import that module into the pages where the directive is required. Not ideal but at least something.

4

Am I the only one questioning whether all of this is generally worth it? Another option would seem to be blowing lazy loading off entirely, and that’s currently where I’m at.

5

No, you aren’t the only one. I’m still trying to figure out what my next move is since I’m not going to get the benefits of being able to use the directive anywhere in my ionic 4 project without having to import the module on every page. Disappointed - let me know if you have any other ideas!

6

In case it wasn’t clear from my last post, my suggestion is to completely ignore lazy loading: put everything in a single AppModule, get rid of all the submodules, and the providedIn decorator on services while you’re at it.

7

Thanks for your suggestion!

8

Hey, did you solve your problem? Because I have a possible solution for this case!