ngx-party-parrots
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

ngx-party-parrots Image

Description Image

Angular 7 easter egg components!

Demo Image

https://raddko15.github.io/ngx-party-parrots/

Installation Image

  npm i ngx-party-parrots

Basic usage Image

The usage consists in three steps.

  • Install the library - covered in "Installation" paragraph
  • Import NgxPartyParrotsModule to the main module of your app or choose the one where it should be used.
imports: [
    NgxPartyParrotsModule
  ],
  • Use components in your application

The simpliest usage:

<ngx-pp-party-parrots
  mode="default"
></ngx-pp-party-parrots>

Recommended usage Image

In your component.ts create the variable and function

 isPartyParrotRainVisible = false;

  onPPCodeProvided() {
    this.isPartyParrotRainVisible = !this.isPartyParrotRainVisible;
  }

In your component.html use two party-parrots components

<ngx-pp-code-detector (codeProvided)="onPPCodeProvided()"></ngx-pp-code-detector>
<ngx-pp-party-parrots mode="default"></ngx-pp-party-parrots>

Run your application - parrots are hidden. Type "parrots" - to display parrots and to hide them - yay you have the easter egg embedded in your app!

Customization Image

There are two ways of modifying components - by choosing mode or by sending custom props! You can also mix both ways :))

Modes:

mode="default"
mdoe="one"
mode="love"
mode="skiing" // recommended only for bright/white backgrounds
mode="snowing"
mode="copsAndSpies"

Props:

@Input() parrotsAmount: number;
@Input() opacity: number; // 0.1 - 1
@Input() parrotsData: ParrotModel[];
@Input() speed: { min: number, max: number };
@Input() skiingMode: string; // yes/no
@Input() slalomLength: { min: number, max: number };

Contributors Image

raddko15, proxeld, bulbulator

Package Sidebar

Install

npm i ngx-party-parrots

Weekly Downloads

4

Version

0.0.6

License

MIT

Unpacked Size

2.5 MB

Total Files

42

Last publish

Collaborators

  • raddko