Can't bind to 'lazyload' since it isn't a known native property

[audacitus]

I'm running an existing Ionic 2 project (2.0.0-beta.11, using Angular 2.0.0-rc.4). Installed and setup, but keep getting the following error (The error occurs on runtime. No issue when compiling)

Steps I took:

Ran Npm:
$ npm install ng2-lazyload-image --save

Imported into my component:
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

Set Directives:
directives: [ LazyLoadImageDirective ]

Set variables and defaults:

export class PostComponent {
defaultImage: any = 'build/assets/preloader.gif';
offset = 100;
@Input() feedImage: string = 'build/assets/blank-default-feed-bg.png';
}

In my template:
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">

Maybe there's something I'm overlooking, but I can't seem to see what it is.

[tjoskar]

Hi,

I can't reproduce the problem. What version of ng2-lazyload-image are you using? Is your project open source so I can take a look at it?

Steps I took:

$ npm install -g ionic@beta
$ ionic --version
2.0.0-beta.37
$ ionic start ionic-lazy-load-images --v2
$ cd ionic-lazy-load-images
$ npm install ng2-lazyload-image@2.1.1 --save
$ ionic serve

Updated the code:

`app/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home" #container>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p style="height: 1000px;">
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <img
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">
</ion-content>

`app/pages/home/home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Component({
  templateUrl: 'build/pages/home/home.html',
  directives: [ LazyLoadImageDirective ]
})
export class HomePage {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://hd.unsplash.com/photo-1441765425173-8fd330fb4a02';
  offset = 100;

  constructor(private navCtrl: NavController) {
  }
}

And it works fine :)

HOWEVER, since ionic is using tabs (per default) and adding display: none on the scroll container, it makes it nearly impossible to determine if the image is initially in viewport or not. It should be nice to use something like intersection observer but it only works in Chrome and if you targeting iOS you are going to use Safari :/

One solution is however to check if the image is hidden (eg: el.offsetParent === null) but when the image get visible again, ng2-lazyload-image will not receive any notification and IF the image is in the viewport, the image will not show up before the user starts to scrolling. You could however use *ngIf for that:

<img
    *ngIf="container._scroll._el.offsetParent !== null"
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">

But that doesn't look any good :/

So.. you might or might not be able to use ng2-lazyload-image in your ionic app (depending on your layout) but you should not get any runtime errors.

[StanFaas]

You made a typo.
It's [lazyLoad], not [lazyload]

Cheers :)

[audacitus]

That sounds embarrassingly simple.
I'll be upgrading to the rc1 and try it out. Thanks.

On Mon, Oct 17, 2016 at 1:37 PM, Stan Faas notifications@github.com wrote:

You made a typo.
It's [lazyLoad], not [lazyload]

Cheers :)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.

[tjoskar]

@StanFaas, nice catch!

[Jayakarreddy]

I'm getting the same error how can I solve it.