LC Modal

Angular modal component.

Demo

Click here for preview

Description

• LcModal component is an Angular component for displaying custom content in modal
• Show any Angular component in modal
• Supports multiple modals and modals inside of a modals
• Has maximize/restore
• Resizable and draggable
• Compatible with Angular 2+ up to Angular v18.0.0
• Only dependency is Font Awesome

Tested with

• Firefox (latest)
• Chrome (latest)
• Chromium (latest)
• Edge
• IE11

Installing / Getting started

npm install @libusoftcicom/lc-modal

Register ModalModule in NgModule with components that are opened in modal:

  import { ModalModule } from '@libusoftcicom/lc-modal';
  import { ModalComponentExample } from '...'; // component used in modal

  @NgModule(
    {
      declarations: [..., ModalComponentExample],
      imports: [
        ModalModule,
        ...
      ],
      providers: [...],
      bootstrap: [...]
      })
  export class AppModule {}

Add modal anchor component:

<dialog-anchor></dialog-anchor>

Open modal:

let modalResult = await this.modal
      .title('Example modal')
      .component(ModalComponentExample)
      .setHeight(370)
      .setWidth(700)
      .draggable(true)
      .showMaximize(true)
      .open();

Developing

Built With:

• Angular
• Font Awesome

Setting up Dev

This project was generated with Angular CLI version 8.1.3.

Angular CLI must be installed before building LC Modal component.

npm install -g @angular/cli

git clone https://github.com/LibusoftCicom/lc-modal.git
cd lc-modal/
npm install
npm run start

Open "http://localhost:4200" in browser

Building

This project was generated with Angular CLI version 8.1.3.

Angular CLI must be installed before building LC Modal component.

npm install -g @angular/cli

git clone https://github.com/LibusoftCicom/lc-modal.git
cd lc-modal/
npm install
npm run build

Versioning

We use SemVer for versioning. For the versions available, see the link to tags on this repository.

Tests

This project was generated with Angular CLI version 8.1.3.

Angular CLI must be installed before building LC modal component.

npm install -g @angular/cli

git clone https://github.com/LibusoftCicom/lc-modal.git
cd lc-modal/
npm install
npm run test

Contributing

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and code of conduct and then check out one of our issues.

Licensing

LC Modal is freely distributable under the terms of the MIT license.