Directives not working but there's no error in console

Ionic Framework ionic-v3
1

my ionic info:

@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0

The issue is that I created a directive with the ionic cli which automatically updates my app.modules.ts, but i tried in several ways and the directive doesn’t work,

this is my app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component'; 


import { HighlightDirective } from '../directives/highlight/highlight';

@NgModule({
  declarations: [
    MyApp,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
   //native providers
  ]
})
export class AppModule {}

this is highlight.ts

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

/**
 * Generated class for the HighlightDirective directive.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
 * for more info on Angular Directives.
 */
@Directive({
  selector: '[highlight]' // Attribute selector
})
export class HighlightDirective {

  constructor(el: ElementRef) {
    console.log("Directive initialized");
    el.nativeElement.style.backgroundColor = 'yellow';
  }

}

and in the page i’m using the directive its the following

<ion-header>

  <ion-navbar>
    <ion-title>New Page</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div highlight>
    Hi
  </div>
</ion-content>

the page.ts

@IonicPage()
@Component({
  selector: 'page-new-client',
  templateUrl: 'new-client.html',
})
export class NewClientPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
  }

}

but when I load the page that tries to use the directive, i get nothing

image
image.png401×617 4.78 KB

and this is my console:

image

I’m using Lazy loading for Page navigation, any help will be appreciated

1 Like
2

I have exactly the same issue… have you find a solution ?

3

At that moment I tried a different approach, then the official blog article was released so I followed that, basically it said that you need to create a specific module only for directives that imports and exports those directives, then on each component where you intent to use the directive(s) , you should import the directives module on your “componentName”.module.ts, here is the link of the article

https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/

1 Like
4

Thank you very much maaan!!!