npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ng-vibe/toastify

v0.1.2

Published

A comprehensive library for Angular 17+, designed for generating various fluid and aesthetically pleasing toast notifications with extensive configuration options.

Downloads

88

Readme

Available on npmjs

Elevate your Angular 17+ applications with fluid, customizable toast messages using @ng-vibe/toastify. This library enables you to create various toast messages that can be positioned anywhere on the screen, offering extensive configuration options to tailor each toast to your needs. Initialize through TypeScript without the need for HTML selectors for a fluid integration into your project.

Play with code at Stackblitz

@ng-vibe/toastify

Features

  • Multiple Positions: Place your toasts at any corner of the screen or even full-width at the top or bottom.
  • Custom Animations: Choose from a wide array of animations for both entrance and exit.
  • Flexible Configuration: Adjust text alignment, include a progress bar, and much more.
  • No HTML Selectors: Initialize and configure entirely through TypeScript for a clean, modular approach.
  • Support for Angular 17+: Designed to work smoothly with the latest versions of Angular.

Installation

  1. Install @ng-vibe/toastify using npm:

    npm install @ng-vibe/toastify
  2. Add @ng-vibe/toastify to your Angular module providers by importing provideNgVibeToastify:

    import { provideNgVibeToastify } from '@ng-vibe/toastify';
    ...
    providers: [
      ...,
      provideNgVibeToastify(),
    ],
  3. Incorporate the @ng-vibe/toastify styles into your application:

    // In angular.json
    "styles": [
      "./node_modules/@ng-vibe/toastify/styles/styles.css",
      ...
    ],

    Or in your main styles file:

    // In styles.scss
    @import '@ng-vibe/toastify/styles/styles';

Usage

To use @ng-vibe/toastify in your components, import ToastifyRemoteControl and initialize it:

import { ToastifyRemoteControl } from '@ng-vibe/toastify';

private toast: ToastifyRemoteControl = new ToastifyRemoteControl();

openToast() {
  this.toast.openToast('Message!', 'Title');
}

Configuring Options

Customize your toast by setting the options property before calling openToast():

this.toast.options = {
  text: 'Your message here!',
  title: 'Your title here',
  autoCloseDuration: 3000,
  layoutType: ToastTypeEnum.SUCCESS,
  position: ToastPosition.TOP_LEFT,
  progressBar: ProgressBar.DECREASE,
  textAlign: TextAlignEnum.START,
  animationIn: AppearanceAnimation.BOUNCE_IN,
  // additional options...
};
this.toast.openToast();

Options

| Option | Description | Type | |-------------------|-----------------------------------------------------|-----------------| | animationIn | Animation type for the toast appearance. | AppearanceAnimation | | animationOut | Animation type for the toast disappearance. | DisappearanceAnimation | | position | Screen position of the toast. | ToastPosition | | autoCloseDuration | Duration before the toast automatically closes. | number | | progressBar | Type of progress bar displayed. | ProgressBar | | layoutType | Type of toast based on context (success, info, etc.)| ToastTypeEnum | | textAlign | Alignment of the text within the toast. | TextAlignEnum | | showClose | Whether a close button is displayed. | boolean | | showIcon | Whether an icon is displayed. | boolean | | text | Text content of the toast. | string | | title | Title of the toast. | string |

Contributing

We welcome contributions to make @ng-vibe/toastify even better! Whether you're fixing bugs, adding new features, or improving the documentation, your help is greatly appreciated. 🌟 Check out our contribution guidelines for more information.

License

This project is licensed under the MIT License. See the LICENSE file for details.