ngx-fizz

Rich Animated Icon set for AngularIO operated by animeJS

Index

• Prerequisities
• Installation
• Quick start
• Browser support
• License

Prerequisities

There are not many prerequisites to use Fizz.

• Angular 7 or later
• And prerequisites for using Angular
• Array and Object polyfills

If your project is on angular 7 or later, you can easily use Fizz. Also we are gradually increase angular version support.

Installation

You can install Fizz very easily and quick.

$ npm intsall fizz --save

You just install Fizz using npm. Now, we are all set to use Fizz!

Quick start

Very first start

Let's start Fizz with quick start example.

First, import FizIconSetModule to module which you want to use Fizz.

import { FizzIconSet } from ‘fizz’;

@NgModule({
	imports: [
		FizzIconSet,
	],
})
export class SomeModule {}

Second, insert Fizz tag to angular template.

<fiz-check [state]=’ShowHideState.SHOW’></fiz-check>

You can check availabe Icons and its @Inputs, @Outputs, and @Methods.

Separate Import

On above example, we use FizIconSetModule to use FizCheckIconComponent. However FizIconSetModule export all icon components Fizz provides, we can easily use every fizz icons but it makes module heavy. Therefore when you want to optimize your angular module, then you have to import icons separately like below.

For the case of FizCheckIcon , You just import FizCheckIconModule where you want to use.

import { FizCheckModule } from ngx-fizz;

@NgModule({
    imports: [
        FizCheckModule,
    ],
})
export class SomeModule {}

You can check other module's name on Icons.

Complicate Animation

Let's go one more step. Now we make check icon show and then hide when show animation end.

<fiz-check (click)="onIconClick()" #checkIcon></fiz-check>

export class SomeComponent {
    @ViewChild('checkIcon') public checker: FizCheckIconComponent,
    
    public onIconClick() {
        const { checker } = this;
        checker.hide();
        checker.show();
    }

Does it work collectly?

The reason why animation doesn't work as you intend is that every Fizz icons animate asynchronously (how animejs works). To solve this problem, you need to use 'Promise chain'. So do we need to use 'Promise'? Yes, But you don't need to create 'Promise object' since Fizz provides FizFlow and FizFlowFunction (of course, it use Promise internally). Then let's use these.

First, import FizFlow and FizFlowFunction.

import { FizFlow, FizFlowFunction } from 'ngx-fizz';

Second, declare FizFlow object with an array of FizFlowFunction that contains sequence of animation. Here, FizFlowFunction constructor receives two arguments, first argument is animation target component and second is method name which return promise.

public onIconClick() {
        const { checker } = this;

        const flow = new FizFlow([
            new FizFlowFunction<FizCheckComponent>(checker, 'hide'),
            new FizFlowFunction<FizCheckComponent>(checker, 'show'),
        ]);
        flow.run();
    }

Now you have icon which has animation chain.

API references

Will be added soon!

Browser support

IE / Edge	Firefox	Chrome	Safari	iOS Safari
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

License

The MIT License Copyright (c) 2019 dhguswns23

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.