Handle Modal opening

Overview

The ui-modals library provides a set of modals that can be used to display information, gather user input, or confirm actions. These modals are designed to be consistent with the overall look and feel of the application, ensuring visual consistency and ease of use.

Why use cds-modal?

• Consistency: Ensures that all modals across the application have a uniform style.
• Ease of Use: Simplifies the process of opening modals in the application.
• Customization: Allows for customization of modals to suit specific use cases.

How to use cds-modal

Step 1: Add the ui-modals to Assets

Ensure that the ui-modals files are included in the assets section of your angular.json file.

angular.json

{
  "projects": {
    "celerov2-ui-client": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@celerofinancas/ui-modals/assets",
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

Step 2: Import the ModalService into your Component

Ensure that the ModalService is imported into your component. This service is used to open modals in the application.

You must pass a component to be displayed in the modal, to do this pass it in the modalService

If you want to pass some data to the modal, you can pass it as the second parameter of the open method.

example-component.component.ts

import { CustomComponentToShowInModal } from '@celerofinancas/ui-project';
import { ModalService } from "@celerofinancas/ui-modals";
import { Component, inject } from '@angular/core';

@Component({
  standalone: true,
  selector: 'example-component',
  templateUrl: './component-name.component.html',
})
export class ExampleComponent {
  /**
   * Modal service for handling modals
   */
  private modalService = inject(ModalService);

  /**
   * Open the modal
   */
  public openModal(): void {
    this.modalService.open(CustomComponentToShowInModal, {
      inputName: 'inputValue',
    });
  };
}

Step 3: Add the method openModal to the component

Add the openModal method to the component. This method is used to open the modal when the user interacts with the component.

app.component.html

<button (click)="openModal()">Open Modal</button>

Explanation

1. Import the ModalService: Import the ModalService from the ui-modals library into your component. This service is used to open modals in the application.
2. Open the Modal: Use the open method of the ModalService to open the modal. Pass the component you want to display in the modal as the first parameter and any data you want to pass to the modal as the second parameter.
3. Add the openModal Method: Add the openModal method to the component. This method is called when the user interacts with the component, such as clicking a button.

Advanced Customization

For advanced use cases where you need complete control over modal appearance, behavior, and functionality, you can create custom modal wrappers that replace the base modal from the ModalService.

Custom modal wrappers allow you to:

• Complete Control: Full control over modal styling, layout, and behavior
• Enhanced Functionality: Add custom features like lifecycle hooks, validation, and specialized interactions
• Consistent Branding: Ensure modals match your application's specific design requirements

To learn how to create custom modal wrappers, check the Custom Modal Wrapper documentation.

Conclusion

By following these steps, you can easily open modals in your application using the ui-modals library. This ensures that all modals in the application have a consistent style and behavior, providing a better user experience.