🎨 Rename project to ng-lazyload-image

README.md

@@ -1,29 +1,29 @@
-## ng2-lazyload-image
+## ng-lazyload-image
 
-> Lazy image loader for Angular 2
+> Lazy image loader for Angular ≥ v2
 
-[![Build Status](https://travis-ci.org/tjoskar/ng2-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng2-lazyload-image) [![npm version](https://badge.fury.io/js/ng2-lazyload-image.svg)](https://badge.fury.io/js/ng2-lazyload-image)
-[![npm](https://img.shields.io/npm/l/ng2-lazyload-image.svg?maxAge=2592000)]()
+[![Build Status](https://travis-ci.org/tjoskar/ng-lazyload-image.svg?branch=master)](https://travis-ci.org/tjoskar/ng-lazyload-image) [![npm version](https://badge.fury.io/js/ng-lazyload-image.svg)](https://badge.fury.io/js/ng-lazyload-image)
+[![npm](https://img.shields.io/npm/l/ng-lazyload-image.svg?maxAge=2592000)]()
 
 [![Build Status](https://saucelabs.com/browser-matrix/tjoskar.svg)](https://saucelabs.com/beta/builds/c7a7d7683d6843f79ae4118f737769c5)
 
 About 150 loc and no dependencies (except for angular and rxjs of course)
 
-Demo: http://tjoskar.github.io/ng2-lazyload-image/
+Demo: http://tjoskar.github.io/ng-lazyload-image/
 
 ### Requirement
 The browser you targeting need to have support of `WeakMap`. If you need to support an older browser (like IE or Safari) you will need to include polyfill for `WeakMap` (see https://github.com/zloirock/core-js for example).
 
 ### Installation
 ```
-$ npm install ng2-lazyload-image --save
+$ npm install ng-lazyload-image --save
 ```
 
-And then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/app.module.ts)):
+And then include it in your module (see [app.module.ts](https://github.com/tjoskar/ng-lazyload-image/blob/master/example/app.module.ts)):
 ```javascript
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { LazyLoadImageModule } from 'ng2-lazyload-image';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { AppComponent } from './app.component';
 
 @NgModule({
@@ -61,7 +61,7 @@ It also supports background images, by using `backgroundImage`:
         <div [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset"></div>
         <!--
         After it has been loaded the div will transform into:
-        <div class="ng2-lazyloaded" style="background-image: url('https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg');"></div>
+        <div class="ng-lazyloaded" style="background-image: url('https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg');"></div>
         -->
     `
 })

changelog.md

@@ -1,11 +1,20 @@
 # Changelog
 
+## 3.0.0 (2017-03-25)
+
+### Feature
+* Upgrade to Angular v4
+* Renamed project to ng-lazyload-image
+
+### Braking changes
+* Renamed css class names from `ng2-lazyloaded` and `ng2-lazyloading` to `ng-lazyloaded` and `ng-lazyloading` respectively
+
 ## 2.4.0 (2017-02-19)
 
 ### Features
-* Make it possible to use default image as background. closes [#115](https://github.com/tjoskar/ng2-lazyload-image/issues/115). Thanks to [igoralemasow](https://github.com/igoralemasow) :tada:
+* Make it possible to use default image as background. closes [#115](https://github.com/tjoskar/ng-lazyload-image/issues/115). Thanks to [igoralemasow](https://github.com/igoralemasow) :tada:
 
 ## 2.3.2 (2017-02-07)
 
 ### Bug Fixes
-* Remove `src` as directive input. closes [#44](https://github.com/tjoskar/ng2-lazyload-image/issues/44)
+* Remove `src` as directive input. closes [#44](https://github.com/tjoskar/ng-lazyload-image/issues/44)

dist/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "ng2-lazyload-image",
-  "version": "2.4.0",
-  "description": "Lazy image loader for Angular 2",
+  "name": "ng-lazyload-image",
+  "version": "3.0.0",
+  "description": "Lazy image loader for Angular > v2",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tjoskar/ng2-lazyload-image.git"
+    "url": "git+https://github.com/tjoskar/ng-lazyload-image.git"
   },
   "keywords": [
     "lazy-load",
     "lazy-image",
-    "angular2"
+    "angular"
   ],
   "author": "Oskar Karlsson <kontakta@oskarkarlsson.nu>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/tjoskar/ng2-lazyload-image/issues"
+    "url": "https://github.com/tjoskar/ng-lazyload-image/issues"
   },
-  "homepage": "https://github.com/tjoskar/ng2-lazyload-image#readme",
+  "homepage": "https://github.com/tjoskar/ng-lazyload-image#readme",
   "peerDependencies": {
-    "@angular/core": "^2.0.0",
-    "rxjs": "^5.0.0-beta.11"
+    "@angular/core": ">=2.0.0",
+    "rxjs": ">=5.0.0"
   }
 }

example/bg-image.component.ts

@@ -11,7 +11,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
             background-size: cover;
         }
         
-        div.ng2-lazyloaded {
+        div.ng-lazyloaded {
             animation: fadein .5s;
         }
 

example/default-image.component.ts

@@ -9,7 +9,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
             min-height: 1127px;
         }
 
-        img.ng2-lazyloaded {
+        img.ng-lazyloaded {
             animation: fadein .5s;
         }
 

example/fade-in-image.component.ts

@@ -11,7 +11,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
             opacity: 0;
         }
 
-        img.ng2-lazyloaded {
+        img.ng-lazyloaded {
             opacity: 1;
         }
     `],

example/pixelated-image.component.ts

@@ -28,7 +28,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
             transition: opacity 1s;
             opacity: 0;
         }
-        .ng2-lazyloaded {
+        .ng-lazyloaded {
             opacity: 1;
         }
     `],

example/scroll-container.component.ts

@@ -9,7 +9,7 @@ import { Component, ChangeDetectionStrategy, ElementRef } from '@angular/core';
             min-height: 1127px;
         }
 
-        img.ng2-lazyloaded {
+        img.ng-lazyloaded {
             animation: fadein .5s;
         }
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "ng2-lazyload-image",
-  "version": "2.4.0",
-  "description": "Lazy image loader for Angular 2",
+  "name": "ng-lazyload-image",
+  "version": "3.0.0",
+  "description": "Lazy image loader for Angular > v2",
   "main": "index.js",
   "scripts": {
     "prepublish": "npm run build",
@@ -18,19 +18,19 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tjoskar/ng2-lazyload-image.git"
+    "url": "git+https://github.com/tjoskar/ng-lazyload-image.git"
   },
   "keywords": [
     "lazy-load",
     "lazy-image",
-    "angular2"
+    "angular"
   ],
   "author": "Oskar Karlsson <kontakta@oskarkarlsson.nu>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/tjoskar/ng2-lazyload-image/issues"
+    "url": "https://github.com/tjoskar/ng-lazyload-image/issues"
   },
-  "homepage": "https://github.com/tjoskar/ng2-lazyload-image#readme",
+  "homepage": "https://github.com/tjoskar/ng-lazyload-image#readme",
   "peerDependencies": {
     "@angular/core": ">=2.0.0",
     "rxjs": ">=5.0.0"

src/lazyload-image.ts

@@ -56,8 +56,8 @@ function setLoadedStyle(element: HTMLElement) {
     const styles = element.className
         .split(' ')
         .filter(s => !!s)
-        .filter(s => s !== 'ng2-lazyloading');
-    styles.push('ng2-lazyloaded');
+        .filter(s => s !== 'ng-lazyloading');
+    styles.push('ng-lazyloaded');
     element.className = styles.join(' ');
     return element;
 }