@dovipas/ngx-is-image-loaded
v1.0.0
Published
Simple Angular 6+ directive that tells if an image is loaded.
Downloads
14
Maintainers
Readme
NgxIsImageLoaded
If You are looking for simple Angular 6+ directive that tells if an image is loaded. This is the place!
Note
Directive requires Rxjs version >= 6.0.0.
Demo
Check the link
Usage
Install ngx-positioner
- npm:
$ npm install ngx-is-image-loaded
- yarn:
$ yarn add ngx-is-image-loaded
import NgxIsImageLoadedModule
import { NgxIsImageLoadedModule } from 'ngx-is-image-loaded';
@NgModule({
declarations: [SomeComponent, ...],
imports: [
...
NgxIsImageLoadedModule
],
providers: []
})
Use NgxIsImageLoadedDirective
@Component(...)
export class SomeComponent {
...
isImgLoaded = false;
url = 'https://123.com/image.jpg';
// or
// url = ['https://123.com/image.jpg','https://123.com/image.jpg','https://123.com/image.jpg'];
onImageLoaded(isLoaded: boolean) {
this.isImageLoaded = isLoaded;
}
And
<div class="container"
ngxIsImageLoaded
(isImageLoaded)="onImageLoaded($event)"
[isLoadSequenced]="true"
[url]="url">
<img alt="image"
src="{{url}}"
*ngIf="isImgLoaded">
</div>
Directive
Inputs:
url: string | Array;
url input can take string or array of strings with urls;
isLoadSequenced: boolean;
If You want to use array of string in url input, You can load every url sequentially;
Default value: false;
Outputs:
isImageLoaded: boolean;
isImageLoaded: EventEmitter that emits boolean is url or array of urls is loaded;
Contributing
- Fork repo.
npm install / yarn
.- Make your changes.
- Add your tests.
npm run test / yarn start test
.npm run build / yarn start build
.- After all tests are passing.
- Commit, push, PR.
License
Released under the terms of MIT License.