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: 15 days 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 (4 months ago)
• Default Branch: main
• Last Pushed: 2024-12-04T13:19:39.000Z (about 2 months ago)
• Last Synced: 2024-12-19T12:09:57.682Z (about 1 month ago)
• Topics: angular, material
• Language: TypeScript
• Homepage:
• Size: 453 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 6
• 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`.          |