How to load custom directive inside custom component

Ionic Framework ionic-v3
1

First off, I’m following this code here.

I’m trying to implement image caching. I believe I’m having an issue with lazy loading but I’m not sure.

I have a custom component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'lazy-img',
  template: `
  <div text-center [ngClass]="{ 'placeholder': placeholderActive }">
    <img [inputSrc]="inputSrc" lazy-load (loaded)="placeholderActive = false"/>
  </div>
  `})

export class LazyImgComponent {

  @Input() inputSrc: string;

  public placeholderActive: boolean = true;

}

I also have a custom directive

import { ImageCacheProvider } from './../providers/image-cache/image-cache';
import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy, Renderer2 } from '@angular/core';

@Directive({
    selector: '[lazy-load]'
})

export class LazyLoadDirective implements OnInit, OnDestroy {

    @Input('inputSrc') src = '';
    @Output() loaded = new EventEmitter();

    public loadEvent: any;
    public errorEvent: any;

    constructor(public el: ElementRef,
        public imgCacheService: ImageCacheProvider,
        public renderer: Renderer2) { }

    ngOnInit() {
        // get img element
        const nativeElement = this.el.nativeElement;
        const render = this.renderer;

        // add load listener
        this.loadEvent = render.listen(nativeElement, 'load', () => {
            render.addClass(nativeElement, 'loaded');
            this.loaded.emit();
        });

        this.errorEvent = render.listen(nativeElement, 'error', () => {
            nativeElement.remove();
        });

        // cache img and set the src to the img
        this.imgCacheService.cacheImg(this.src).then((value) => {
            render.setAttribute(nativeElement, 'src', value);
        });
    }

    ngOnDestroy() {
        // remove listeners
        this.loadEvent();
        this.errorEvent();
    }

}

Both are exported via *.module.ts in their component or directive directories.

For example, the Lazy Image component, along with some others, are exported in components.module.ts

import { LazyImgComponent } from './lazy-img/lazy-img';
import { NgModule } from '@angular/core';
import { CommentsComponent } from './comments/comments';
import { IonicModule } from "ionic-angular";
import { LoadingComponent } from './loading/loading';

@NgModule({
	declarations: [CommentsComponent,
    LoadingComponent,
    LazyImgComponent
    ],
	imports: [IonicModule],
	exports: [CommentsComponent,
    LoadingComponent,
    LazyImgComponent
    ]
})
export class ComponentsModule {}

These are declared in my app.module.ts as well as imported in my home.module.ts

import { ComponentsModule } from './../../components/components.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule,
  ],
})
export class HomePageModule {}

I have some logging inside my custom directive which never gets called so I’m assuming it’s not loading that directive inside my custom component. I also get a ts error [Angular] Can’t bind to ‘inputSrc’ since it isn’t a known property of ‘img’. inside my custom component indicating that it isn’t loading the directive correctly.

I cannot figure out how to do this for the life of me. Any help would be appreciated.

2

Hello. Did you solve your problem about using a custom directive inside a custom component?

3

No I was never able to figure it out and moved on.

4

Any update on this? I’m looking for exactly the same

5

Did you add directive in declarations…As i am seeing u only declared components in your modules

declarations: [CommentsComponent,
LoadingComponent,
LazyImgComponent
],

6

I know this is quite old, but I found a solution to this for anyone still having this problem:
Since both the component and the directive are exported in their respective modules (directives.module.ts and components.module.ts) you need to import the directives module into the components module, so your components can access the directive:

components.module.ts

import { DirectivesModule } from "../directives/directives.module";

@NgModule({
  declarations: [/*your declarations*/],
  imports: [IonicModule, DirectivesModule],
  exports: [/*your exports*/],
})
export class ComponentsModule {}

hope this helps someone