ddata-ui-dialog v0.1.15

DData UI Dialog

This module has two components for handle dialogs easier in ddata world.

Modal dialog with component

If you want to show a component in dialog and then handle events in dialog, you should use this component.

Usage

HTML

<button (click)="showDialog = true">Show dialog</button>

<dd-modal-dialog
  title="My awesome dialog title"
  [model]="model"
  [dialogContent]="dialogContent"
  [showDialog]="showDialog"
  [overlayClickCloseDialog]="false"
  closeButtonText="Close"
  (success)="save()"
  (fail)="cancel()"
  ></dd-modal-dialog>

TypeScript

@Component({
  selector: 'app-awesome-component',
  templateUrl: './awesome.component.html',
  styleUrls: ['./awesome.component.scss']
})
export class AwesomeComponent implements OnInit {
  model: BaseModelInterface = new BaseModel(); // your model definition
  showDialog = false;
  dialogContent: DialogContentInterface = {
    createEditComponent: ProductCreateEditComponent,
    createEditOptions: {
      // ...
    },
    listComponent: ProductListComponent,
    listOptions: {
      // ...
    },
  };

  ngOnInit(): void {
    // ...
  }

  save(): void {
    // ...
    this.showDialog = false;
  }

  cancel(): void {
    this.showDialog = false;
  }
}

API

DialogContentInterface

Confirm dialog

If you wan to open a simple confirm or message dialog to the user, you should to use this component.

Usage

HTML

<dd-confirm-dialog
  title="Are you sure?"
  content="Are you sure to delete this element?"
  type="delete"
  successButtonText="Delete"
  cancelButtonText="Cancel"
  closeButtonText="Close"
  [isModalVisible]="showDeleteDialog"
  [overlayClickCloseDialog]="false"
  (confirm)="deleteIsConfirmed()"
  (pressed)="buttonPressedOnDialog($event)"
  ></dd-confirm-dialog>

TypeScript

@Component({
  selector: 'app-awesome-component',
  templateUrl: './awesome.component.html',
  styleUrls: ['./awesome.component.scss']
})
export class AwesomeComponent implements OnInit {
  showDeleteDialog = false;

  ngOnInit(): void {
    // ...
  }

  deleteIsConfirmed(): void {
    // delete button pressed...
  }

  buttonPressedOnDialog(isConfirmed: boolean): void {
    if (isConfirmed) {
      // delete button pressed...
    } else {
      // cancel or close button pressed...
    }
  }
}

API