https://github.com/soc221b/ngx-dialog
[WIP] Type-safe Angular Dialogs Directive for Angular 16+
https://github.com/soc221b/ngx-dialog
angular material
Last synced: about 1 month ago
JSON representation
[WIP] Type-safe Angular Dialogs Directive for Angular 16+
- Host: GitHub
- URL: https://github.com/soc221b/ngx-dialog
- Owner: soc221b
- License: mit
- Created: 2024-10-10T05:23:55.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-03T06:44:48.000Z (about 2 months ago)
- Last Synced: 2025-03-03T07:28:53.291Z (about 2 months ago)
- Topics: angular, material
- Language: TypeScript
- Homepage:
- Size: 737 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-dialog - Type-safe Angular Dialogs Directive for Angular 16+. (Table of contents / Third Party Components)
- awesome-angular - ngx-dialog - Type-safe Angular Dialogs Directive for Angular 16+. (Table of contents / Third Party Components)
README
# NgxMatDialog
Type-safe Angular Material Dialogs Directive for Angular
## Installation
```bash
npm install ngx-mat-dialog
```
## Usage
```typescript
import { MatDialogDirective } from "ngx-mat-dialog";
@Component({
selector: "dialog-overview-example",
templateUrl: "dialog-overview-example.html",
standalone: true,
imports: [MatDialogDirective, DialogOverviewExampleDialog],
})
export class DialogOverviewExample {
name = "";
animal = "";
visible = false;
openDialog() {
this.visible = true;
}
}
```
```html
Open Dialog
```
> **Note:** You can't use shorthand syntax like `*matDialog`, because it doesn't support `@Output()`. As a result, you cannot listen to the visibility changes of the dialog.
> **Note:** Avoid using `MatDialogConfig.data` to pass data to the dialog and retrieve `dialogResult` from the `MatDialogRef.close`. Instead, use `@Input()` and `@Output()` for type safety.
## API
**Selector:** `[matDialog]`
**Exported as:** `matDialog`
### Properties
| Input | Description |
| --------------------------------------------------------- | ----------------------------------------- |
| `@Input() matDialogVisible: boolean;` | Whether the dialog is visible. |
| `@Input() matDialogConfig: MatDialogConfig;` | Configuration for the dialog. |
| `@Output() matDialogVisibleChange: EventEmitter` | Emits when the dialog visibility changes. |
| `dialogRef: null \| MatDialogRef` | Reference to the `MatDialogRef`. |