📝 Table of Contents

• Introduction
• Installation
• Usage
• Inputs
• Examples

Introduction

@ghp-libraries/toast is a versatile and easy-to-use toast notification component for Angular applications. It allows for customizable toast messages with various position and display options.

Installation

To install ToastComponent, run the following command in your Angular project:

npm install @ghp-libraries/toast

Usage

Displaying a Toast

Inject the ToastService in your component's constructor and use it to display toasts:

import { Component } from "@angular/core";
import { ToastService } from "@ghp-libraries/toast";

@Component({
  selector: "app-example",
  template: `<button (click)="showToast()">Show Toast</button> <ghp-toast />`,
})
export class ExampleComponent {
  constructor(private toastService: ToastService) {}

  showToast() {
    this.toastService.show({
      header: "Success",
      body: "This is a success message!",
      // ... other customizable properties ...
    });
  }
}

Removing a Toast

Toasts can be removed either automatically after a delay or manually. To remove a toast manually, you can call the removeToast method of the ToastService.

Toast Options

The show method of the ToastService accepts an object with the following properties:

• header: string (Title of the toast)
• body: string (Content of the toast)
• delay: number (Duration in milliseconds after which the toast will auto-dismiss)
• position: string to define toast position ('Top left' | 'Top center' | 'Top right' | 'Middle left' | 'Middle center' | 'Middle right' | 'Bottom left' | 'Bottom center' | 'Bottom right')
• marginTop: string to define marginTop;
• marginRight: string to define marginRight;
• marginBottom: string to define marginBottom;
• marginLeft: string to define marginLeft;
• type: string to choose toast style ('success' | 'error' | 'info') ...

Examples

comming soon ...

Contributing

Contributions to improve ToastComponent comming soon ...