# ngz-lightbox

> 点击图片放大

Latest version **0.0.2** (published 2017-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngz-lightbox
pnpm add ngz-lightbox
yarn add ngz-lightbox
bun add ngz-lightbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2017-12-21 |
| First published | 2017-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | zchange |

## Links

- npm: https://www.npmjs.com/package/ngz-lightbox
- npm.io page: https://npm.io/package/ngz-lightbox

## Dependencies (12)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.5
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.18
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.1.1
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.1.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.1.1
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.1.1
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.1.1
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.1.1
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.1.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.1.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.1.1

## Recent versions

- 0.0.2 (latest) — 2017-12-21
- 0.0.1 — 2017-12-21

## README

# NgzLightbox

点击图片放大

## Example
```html
<span NgzLightbox   [innerHtml]='html'></span>
<br/>
<img  NgzLightbox src="https://unsplash.it/600.jpg?image=251" style="width:100px;">

<img NgzLightbox [src]='url' style='width:50px;border:1px solid #ddd'/>

```

```typescript
import {
  Component,
  OnInit,
  AfterViewInit,
  ApplicationRef,
  ViewEncapsulation
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  url: any;
  html: any;
  constructor(
    private sanitizer: DomSanitizer,
    private appRef: ApplicationRef
  ) { }

  ngOnInit() {
    this.html = this.sanitizer.bypassSecurityTrustHtml(
      `<img  NgzLightbox src="https://unsplash.it/600.jpg?image=251" style="width:200px;" onclick='' >
      <img  NgzLightbox src="http://v4.faqrobot.net/upload/web/3000000/20171219/28311513650888121.png" style="width:200px;"  >
      `
    );
    this.url = 'https://unsplash.it/600.jpg?image=251';
  }
}
```

---
_Source: https://npm.io/package/ngz-lightbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._