Description

ng-simple-notification

NgSimpleNotificationService is an Angular service for creating and displaying simple notifications with a progress bar and countdown timer.

Installation

1. Add the service to your Angular project.
2. Import and inject the service in your component.

Table of Contents

• Installing
  • Package manager
• Example

Installing

Package manager

Using npm:

$ npm install ng-simple-notification

1. Install necessary dependencies:

Dependencies and versions

  "@angular/common": "^17.3.0",
  "@angular/core": "^17.3.0"

  import { NgSimpleNotificationService } from './ng-simple-notification.service';

Import default styles

or create yout custom

  @import '../node_modules/ng-simple-notification/src/styles/ng-simple-notification';

Example

  constructor(private notificationService: NgSimpleNotificationService) { }
  
  this.notificationService.setNewNotification({
    message: String,
    propClass: IsIn(['info', 'success', 'error', String]),  // Use a class to style the notification
    duration: Number     // Duration of 10 milliseconds
  });

Properties and Events

setNewNotification: Service to set new notification

message: Displays the message text notification.

propClass: Set a default class or add an custom class.

duration: Countdown timer in notification.

Style structure

  .notifications-controller{
    --font-name: sans-serif;
    //NOTIFICATION COLOR
    --success: #37f89b;
    --error: #ff1465;

    --min-width: 300px;
    --max-width: 300px;
    --max-height: 14.5vh;
    --fixed-height: 40px;

    --primary-500: rgb(43, 48, 59);
    --primary-800: rgb(33, 37, 45);
    --accent-500: rgb(0, 134, 214);
    --accent-50: rgb(211, 238, 255);
    --error-500: rgb(203, 72, 72);
    --gray-65: rgb(215, 215, 215);
    --gray-75: rgb(230, 230, 230);
    --gray-50: rgb(250, 250, 250);
    --green-50: rgb(19, 207, 104);
    --warn-50: rgb(231, 175, 21);

    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px; 

    --sm: 16px;
    --md: 24px;
    --lg: 40px;

    --default-border-radius: 4px;

    --sidebar-size: 250px;
    --header-controlled-height: 72px;
    --list-results-controlled-width: 15vw;

    --border: 1px solid var(--gray-65);
    --transition: all .35s ease-in-out;

    --padding: calc(var(--space-sm) / 1.5) var(--space-sm);

    position: fixed;
    right: 0;
    bottom: 0;
    margin: 1%;
    //width: 250px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-name);
    z-index: 99999999;

    .notification{
        transform: translateX(0);
        color: va(--orange);
        background: white;
        z-index: 99999999;
        animation: showNote 0.5s forwards;
        border-radius: .25rem;
        overflow: hidden;
        box-shadow: 1px 1px 15px rgb(0, 0, 0, .15);
        margin: calc(var(--space-sm) / 2) 0;

        p{
            font-family: var(--font-name);
            color: black;
            font-size: 1em;
            margin: 0;
            padding: 0;
        }

        progress{
            width: 100%;
            position: absolute;
            bottom: -5px;
            left: 0;
            height: 10px;
            border: 0;
            border-radius: 0;
            --webkit-appearance: none;
            &::-webkit-progress-bar {
              background: transparent;
            }
        }
    
        animation: showNote .5s forwards;
    
        &.hided{
            animation: hideNote 1.5s forwards;
        }
    
        &.success{
    
            //background: var(--success);
            padding: var(--padding);

            p {
              margin: 0;
            }

            progress{
              accent-color: var(--success);
              &::-webkit-progress-value {
                color: var(--success);
                background-color: var(--success);
              }
            }
    
        }
    
        &.error{
    
            //background: var(--error);
            padding: var(--padding);

            p {
              color: var(--error);
            }

            progress{
              accent-color: var(--error);
              &::-webkit-progress-value {
                color: var(--error);
                background-color: var(--error);
              }
            }
    
        }
    
    }
  }

  @keyframes showNote {
    from{
        transform: translateX(100vw);
    }
    to{
        transform: translateX(0);
    }
  }

  @keyframes hideNote {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(100vw);
    }
  }