New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Doesn't work with angular 5 #224
Comments
Hi @el-davo, Thanks for the report. Are you using any server rendering? Or precompile your app? Or are you running the app in develop mode? |
Hi. Nope am not doing server side rendering. Yep currently in dev mode using the angular-cli |
What browser are you using? diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..215f0c9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,15 +6,21 @@
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
+<img [defaultImage]="defaultImage" [lazyLoad]="image">
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..cf8cead 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'app';
+ defaultImage = 'https://www.placecage.com/1000/1000';
+ image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975a..7fb6d9d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,13 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
+ LazyLoadImageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } I also created a plnkr (https://embed.plnkr.co/rr046QU9YYWALdX7Xzf6/) but could not reproduce the error. |
My apologies. I looked closer into my issue and it turned out I had this piece of css which seemed to be disabling all scroll events in the browser
To get around this I added this custom scroll event like so
and in my template like so
Now it works perfectly in angular 5 |
Hi, Ive tried this lib in angular 5 but couldnt seem to get it to work. I have a component template like so
and a component like so
And my module
The image simply never shows up. I also get this warning message in the console
Not sure what i'm doing wrong. Any help appreciated
The text was updated successfully, but these errors were encountered: