main.ts

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ModalComponent } from './app/modal/modal.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ModalComponent],
  template: `
    <button (click)="toggleModal()">Show modal</button>

    <app-modal [visible]="showModal()" (close)="toggleModal()">
      <h1>This is the title of the modal</h1>
      <h2>Nice modal</h2>
    </app-modal>
  `,
})
export class App {
  name = 'Angular';
  showModal = signal(false);

  toggleModal() {
    this.showModal.update((visible) => !visible);
  }
}

bootstrapApplication(App, {
  providers: [provideAnimationsAsync()],
});

modal.component.css

.modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
}

.modal-content {
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  display: block;
  border-radius: 0.5rem;
  z-index: 20;
}

modal.component.html

@if(visible()) {
<div class="modal">
  <div class="modal-overlay" (click)="closeModal()"></div>
  <div class="modal-content">
    <ng-content></ng-content>
  </div>
</div>
}

modal.component.ts

import { Component, input, output, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-modal',
  standalone: true,
  imports: [],
  templateUrl: './modal.component.html',
  styleUrl: './modal.component.css',
})
export class ModalComponent {
  visible = input(false);
  close = output();

  closeModal() {
    this.close.emit();
  }
}