# Muk-Card

A Wrapper Component for Mat-Modal.

## Usage

```html

<ng-template #content>
    <lib-muk-dynamic-form
            (onSubmit)="submit($event)"
            [buttons]="buttons"
            [fields]="fields"
    >
    </lib-muk-dynamic-form>
</ng-template>

<lib-muk-button (click)="openDialog()">Open Dialog</lib-muk-button>
```

```typescript
import {Component, TemplateRef, ViewChild} from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import {MukModalComponent} from 'ngx-mui-kit';

interface IData {
    title?: string;
    message?: string;
    headerBg?: boolean;
    content: TemplateRef<unknown> | null;
    component: Type<unknown> | null;
    inputs:any
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    private dialog: MatDialog = inject(MatDialog);
    @ViewChild('content', {static: true}) content!: TemplateRef<unknown>;

    openDialog() {
        let dialogRef = this.dialog.open(MukModalComponent, {
            height: '400px',
            width: '600px',
            data: {
                title: 'Add Employee',
                message: '',
                headerBg: true,
                content: this.content,
                component:ComponentName,
                inputs:{}
            },
        });
    }
}
```

### Properties

| Name   | Type    | Description                         |
|--------|---------|-------------------------------------|
| `data` | `IData` | The data to be passed to the modal. |