Nougat Predominant Middleware

    angular-modal-library
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Angular Modal Library

    GitHub repo size GitHub contributors GitHub stars GitHub forks Twitter Follow

    Project name is a angular-modal-library that allows inset a modal on any angular component to do various task.

    This popup will appear after calling a function with Id of the modal as parameter. Very easy to use and you can customise the functionlity inside the modal

    Prerequisites

    Before you begin, ensure you have met the following requirements:

    • You have installed the latest version of @angular 8+
    • You have a Windows/Linux/Mac machine.

    Installing angular-modal-library

    To install angular-modal-library, follow these steps:

    Linux and macOS:

    npm install angular-modal-library
    

    Windows:

    npm install angular-modal-library
    

    Using angular-modal-library

    To use angular-modal-library, follow these steps:

    import ModalModule from angular-modal-library in your app.module.ts file
    import ModalService from angular-modal-library in your <your-component>.componenet.ts file 
    
    ModalService provides two functions opne(id) openeing and close(id) closing make sure pass the modal id as the parameter in both the functions
    
    in the html create a button and on click it should call the open function. 
    Also create the modal as shown in the example below: 
    
    <sj-modal id="my-modal">
      <div>
        HI
      </div>
      <button (click)="closeModal('my-modal')">Close </button>
    </sj-modal> 
    
    Close button will be inside the modal to close it. 
    
    

    The classes used in Modal library for styling are as follow:

    .modal .modal-body .modal-background .modal-open

    It is also responsive for mobile devices with an slide down animation.

    to custom styling you will need to use ElementRef. (Google it and experiment with it)

    Contributing to angular-modal-library

    To contribute to angular-modal-library, follow these steps:

    1. Fork this repository.
    2. Create a branch: git checkout -b <branch_name>.
    3. Make your changes and commit them: git commit -m '<commit_message>'
    4. Push to the original branch: git push origin <project_name>/<location>
    5. Create the pull request.

    Alternatively see the GitHub documentation on creating a pull request.

    Contributors

    Thanks to the following people who have contributed to this project:

    Contact

    If you want to contact me you can reach me at me@siddhantjaiswal.dev.

    License

    This project uses the following license: MIT .

    KeyWords

    angular #Modal

    Keywords

    none

    Install

    npm i angular-modal-library

    DownloadsWeekly Downloads

    8

    Version

    2.0.0

    License

    none

    Unpacked Size

    85.6 kB

    Total Files

    26

    Last publish

    Collaborators

    • sid.dev