https://github.com/nhusby/ng-modal-service
Simple un-opinionated modal service for Angular
https://github.com/nhusby/ng-modal-service
Last synced: about 1 month ago
JSON representation
Simple un-opinionated modal service for Angular
- Host: GitHub
- URL: https://github.com/nhusby/ng-modal-service
- Owner: nhusby
- License: mit
- Created: 2025-04-07T00:11:48.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-07T00:11:49.000Z (about 1 month ago)
- Last Synced: 2025-04-07T05:51:07.277Z (about 1 month ago)
- Size: 1000 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ng-modal-service (⭐1) - A simple Angular modal Service. (Recently Updated / [Apr 09, 2025](/content/2025/04/09/README.md))
- fucking-awesome-angular - ng-modal-service - A simple Angular modal Service. (Table of contents / Third Party Components)
- awesome-angular - ng-modal-service - A simple Angular modal Service. (Table of contents / Third Party Components)
README
# ng-modal-service
A lightweight, flexible Angular modal service that uses the native HTML dialog element.
## Features
- Modern implementation using Angular's standalone components
- Uses native HTML dialog element for better accessibility
- Simple API to open and close modals
- Supports passing data to modal components
- ESC key and clicking outside closes modal by default
## Installation
```bash
npm install ng-modal-service
```
## Usage
### Import the module
```typescript
import { ModalService } from 'ng-modal-service';
@NgModule({
imports: [
ModalService
]
})
export class AppModule { }
```
### Create a modal component
```typescript
import {Component} from '@angular/core';
import {ModalService} from "ng-modal-service";
@Component({
selector: 'app-example-modal',
template: `
{{ title }}
{{ message }}
Close
`,
})
export class ExampleModalComponent {
title = 'Example Modal';
message = 'This is an example modal';
constructor(protected modalService: ModalService) {}
close() {
this.modalService.close(this);
}
}
```
### Use the service to open and close modals
```typescript
import { Component } from '@angular/core';
import { ModalService } from 'ng-modal-service';
import { ExampleModalComponent } from './example-modal.component';
@Component({
selector: 'app-root',
template: `
Open Modal
`,
})
export class AppComponent {
constructor(private modalService: ModalService) {}
openModal() {
const exampleModalComponent = this.modalService.open(ExampleModalComponent, {
title: 'Custom Title',
message: 'This is a custom message',
});
// use the modalService to close it
// modalService.close(exampleModalComponent);
}
}
```
[//]: # ()
[//]: # (## Styling)
[//]: # ()
[//]: # (Import the default styles in your global styles file:)
[//]: # ()
[//]: # (```scss)
[//]: # (@import 'node_modules/ng-modal-service/lib/styles/modal.scss';)
[//]: # (```)
[//]: # ()
[//]: # (Or override them with your own styles.)
## License
MIT