# angular-unicornify

> Easily add 🦄's to your Angular site. Includes two directives and a service for unicornifying your site. The two directives included are `unicornify-me` and `unicornify-clear` and the service is injectable as `UnicornifyService`.

Latest version **1.0.0** (published 2021-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-unicornify
pnpm add angular-unicornify
yarn add angular-unicornify
bun add angular-unicornify
```

## 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.0 |
| Published | 2021-03-06 |
| First published | 2021-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 309.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jason Raimondi |
| Maintainers | jasonraimondi |

## Links

- npm: https://www.npmjs.com/package/angular-unicornify
- npm.io page: https://npm.io/package/angular-unicornify

## Recent versions

- 1.0.0 (latest) — 2021-03-06
- 1.0.0-rc.0 — 2021-03-06
- 1.0.0-alpha.0 — 2021-03-06

## README

# 🦄 `angular-unicornify`

Easily add 🦄's to your Angular site. Includes two directives and a service for unicornifying your site. The two directives included are `unicornify-me` and `unicornify-clear` and the service is injectable as `UnicornifyService`.

## Installation

```bash
npm install --save angular-unicornify
```

## Usage

```typescript
import { UnicornifyModule } from "angular-unicornify";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, UnicornifyModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

```typescript
import { UnicornifyService } from "angular-unicornify";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(readonly unicorns: UnicornifyService) {
  }
}
```

```html
/* ./app.component.html */
<div class="cornify">
  <span class="corns" unicornify-me>🦄</span>
  <span class="corns-clear" unicornify-clear>🗑️</span>
  <span>{{ unicorns.count }}</span>
</div>
```

## Reference

### Use the `unicornify-me` and `unicornify-clear` Directives

The directives are available for use on any element. Spawn unicorns by clicking the element.

```html
<button unicornify-me>Click for corns</button>
<button unicornify-clear>Click to clear corns</button>
```

### Use the `UnicornifyService`

```ts
export class AppComponent {
  constructor(readonly unicorns: UnicornifyService) {
  }
}
```

- **`add`**_`: () => void`_ - 🦄
- **`remove`**_`: () => void`_ - remove all unicorns
- **`count`**_`: number`_ - how many unicorns?


## 🙌 Credits

Big thanks to:

[__Unicorns & Rainbows On-Demand__](http://www.cornify.com)

[__use-cornify__](https://github.com/daphnesmit/use-cornify)

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