Angular Modal

This guide demonstrates how to use a custom modal in your Angular application. Modals are essential UI components that display content in a layer above the current page.

Creating a Modal Trigger Button

Add a button in the template to trigger the modal. When clicked, it will open the modal with the necessary data passed into it:

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

TypeScript Logic to Handle Modal

Implement the logic to open the modal and pass data into it. Use a service to handle modal operations:

// src/app/index.component.ts
import { Component } from '@angular/core';
import { ModalService } from './modal.service'; // Import the modal service
import { MessageModalComponent } from './modal/modal.component'; // Import the modal component
import { ProjectDeal } from './models/project-deal.model'; // Import the data model

@Component({
    selector: 'app-index',
    templateUrl: './index.component.html',
})
export class IndexComponent {

    constructor(private modalService: ModalService) {}

    openModal(): void {
        this.modalService.open(ModalComponent); // Opens the modal with the provided data
    }
}

Modal Component Template

Create the HTML template for the modal component that will display the content:

<div class="p-6">
    <h2 class="text-xl font-bold mb-4">Modal Details</h2>
    <p></p>
    <div class="flex justify-end mt-4">
        <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
    </div>
</div>

Styling the Modal

Customize the look and feel of the modal using CSS. Ensure it matches your design requirements and behaves correctly across different screen sizes.

This setup demonstrates how to integrate modals into an Angular application. You can further customize the modal's behavior and appearance according to your project needs.