How to load custom directive inside custom component

@squiggie wrote:

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.

Posts: 1

Participants: 1

Read full topic