Angular : Reusable Modal Component Using Content Projection

In Angular, building reusable components is a fundamental part of creating scalable applications. One such reusable component is a modal. By utilizing Angular content projection, we can design a modal component that can project any content passed from the parent component, making it flexible and adaptable.

We’ll cover input and output properties, content projection, and how to handle various scenarios like dynamic content.

Step 1: Setting Up the Modal Component

Start by creating a modal component in your shared folder. The modal component will have the following inputs and outputs:

@Input({ required: true }) title = '';
@Input({ required: true }) shown: boolean;
@Output() shownChange = new EventEmitter<boolean>();

• title: A string to set the title of the modal.
• shown: A boolean to control whether the modal is displayed.
• shownChange: An EventEmitter to notify the parent when the modal is closed.

Step 2: Building the HTML Template

Inside the modal component’s HTML, use the ng-container directive to conditionally display the modal and its backdrop when the shown property is true. Inside the ng-container, we will define the modal's structure:

<ng-container *ngIf="shown">
  <div class="modal-container">
    <div class="modal-header">
      <h1>{{ title }}</h1>
      <span (click)="closeModal()">X</span>
    </div>
    <div class="modal-content">
      <ng-content></ng-content>
    </div>
  </div>
  <div class="backdrop"></div>
</ng-container>

In the above structure:

• The modal header contains the title and a close button (X) to dismiss the modal.
• The modal content is where the content projection happens. The <ng-content></ng-content> acts as a placeholder, allowing any content passed from the parent component to be displayed inside the modal.

Step 3: Managing Modal State

The closeModal method will set shown to false and emit the shownChange event:

closeModal() {
  this.shown = false;
  this.shownChange.emit(this.shown);
}

This ensures that when the user clicks the close button, the modal is closed, and the parent component is notified.

Step 4: Projecting Content Into the Modal

To test the content projection, import the modal component into a parent component (e.g. app), and use Angular data binding to control the modal’s visibility. In this example, we project the different component or content as per our requirements into the modal:

<bt-libs-modal [(shown)]="addExpenseShown" [title]="'Add Expense'">
  <bt-libs-ui-add-expense-form (addExpense)="addExpense($event)" />
</bt-libs-modal>

Here:

• The shown property is two-way bound, allowing the parent component to control the visibility of the modal.
• The title input is set to "Add Expense".
• The content between the modal tags will be projected into the modal’s content area.

When the modal is displayed, the projected form will appear, and any logic related to the form (like handling the custom event) is managed in the parent component.

Step 5: Benefits of Content Projection

• Separation of Concerns: The modal component handles only the modal’s display logic, while the parent component manages the content and its behavior.
• Flexibility: You can project any content into the modal, whether it’s a form, image, or custom template.
• Styling: Any styling for the projected content must be done in the parent component, giving you full control over how content is styled.

Conclusion

By leveraging Angular’s content projection, you can create a reusable modal component that dynamically displays any content passed from its parent. This approach promotes separation of concerns and makes your modal component highly flexible for different use cases, ultimately improving maintainability and scalability in your Angular applications.