# meepo-popover

> popover for angular

Latest version **1.0.4** (published 2018-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install meepo-popover
pnpm add meepo-popover
yarn add meepo-popover
bun add meepo-popover
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-01-03 |
| First published | 2017-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | imeepos |
| Maintainers | imeepos2 |

## Links

- npm: https://www.npmjs.com/package/meepo-popover
- Repository: https://github.com/meepobrother/meepo-popover
- Homepage: https://github.com/meepobrother/meepo-popover/README.md
- Issues: https://github.com/meepobrother/meepo-popover/issues
- npm.io page: https://npm.io/package/meepo-popover

## Dependencies (9)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.5
- [zone.js](https://npm.io/package/zone.js.md) 0.8.4
- [meepo-uuid](https://npm.io/package/meepo-uuid.md) >=1.1.1
- [@angular/core](https://npm.io/package/@angular/core.md) >=5.1.2
- [meepo-xscroll](https://npm.io/package/meepo-xscroll.md) >=1.2.9
- [@angular/forms](https://npm.io/package/@angular/forms.md) >=5.1.2
- [@angular/common](https://npm.io/package/@angular/common.md) >=5.1.2
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.10
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) >=5.1.2

## Recent versions

- 1.0.4 (latest) — 2018-01-03
- 1.0.3 — 2017-12-29
- 1.0.2 — 2017-12-27
- 1.0.1 — 2017-12-27
- 1.0.0 — 2017-12-27

## README

## popover for angular

```html
<popover></popover>

<ng-template #tpl let-sn>
    <input class="weui-input" type="text" (change)="change($event)">
    <a class="weui-btn weui-btn_primary" (click)="close(sn)">提交</a>
</ng-template>

<a (click)="push()" class="weui-btn weui-btn_primary" style="position: absolute;bottom:0px;left:0px;right:0px;">添加</a>

```


```ts
import {
  Component, OnInit, ChangeDetectionStrategy,
  ChangeDetectorRef, ViewChild, TemplateRef
} from '@angular/core';
import { PopoverService } from 'meepo-popover';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit {
  title = 'app';
  id: number = 0;
  value: string;

  @ViewChild('tpl') tpl: TemplateRef<any>;
  constructor(
    public cd: ChangeDetectorRef,
    public popover: PopoverService
  ) { }

  ngOnInit() { }

  push() {
    this.id++;
    let popover = this.popover.create(this.tpl);
    popover.afterClose().subscribe(res => {
      console.log('close', res);
    });
    popover.afterOpen().subscribe(res => {
      console.log('open', res);
    });
  }

  change(e: any) {
    this.value = e.target.value;
  }

  close(e) {
    this.popover.close(e, this.value);
  }
}

```

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