GreenFlag31

  openModalComponent() { 
    this.modalService.open(ModalContentComponent, {
      animations: {
        modal: {
          enter: 'enter-scaling 0.3s ease-out',
          leave: 'fade-out 0.3s forwards',
        },
        overlay: {
          enter: 'fade-in 1s',
          leave: 'fade-out 0.3s forwards',

GreenFlag31

  private openWithComponent(component: Type<unknown>) {
    // create the desired component, the content of the modal box
    const newComponent = createComponent(component, {
      environmentInjector: this.injector,
    });
    // create the modal component and project the instance of the desired component in the ng-content
    this.newModalComponent = createComponent(ModalComponent, {
      environmentInjector: this.injector,
      projectableNodes: [[newComponent.location.nativeElement]],
    });

GreenFlag31

export class AppComponent {
  // Query the #view element in the template, expecting it to be of type ViewContainerRef
  // and store the reference in the variable vcr.
  @ViewChild('view', { static: true, read: ViewContainerRef })
  vcr!: ViewContainerRef;

  constructor(private modalService: ModalService) {}

  openModalTemplate(view: TemplateRef<Element>) {
    this.modalService.open(this.vcr, view, {

GreenFlag31

@keyframes enter-slide-down {
  from {
    transform: translate(-50%, -60%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}

@keyframes enter-scaling {

GreenFlag31

export class ModalComponent implements AfterViewInit {
  @ViewChild('modal') modal!: ElementRef<HTMLDivElement>;
  @ViewChild('overlay') overlay!: ElementRef<HTMLDivElement>;
  options!: Options | undefined;
  modalAnimationEnd!: Observable<Event>;
  modalLeaveAnimation!: string;
  overlayLeaveAnimation!: string;
  overlayAnimationEnd!: Observable<Event>;
  modalLeaveTiming!: number;
  overlayLeaveTiming!: number;

GreenFlag31

export interface Options {
  animations?: {
    modal?: {
      enter?: string;
      leave?: string;
    };
    overlay?: {
      enter?: string;
      leave?: string;
    };

GreenFlag31

@Injectable({
  providedIn: 'root',
})
export class ModalService {
  // Create a reference to our modal component
  newModalComponent!: ComponentRef<ModalComponent>;
  // Optional content passed at the creation : animation, size, ... 
  options!: Options | undefined;

  constructor(

GreenFlag31

<div class="container">
  <!-- Add a TemplateRef on ng-template  -->
  <ng-template #view>
    <div class="modal-container">
      <div class="title">
        <h2>How to create component dynamically in Angular ?</h2>
      </div>
      <div class="content">
        <p class="current">
          This is the first method. First method is to use a ViewContainerRef

GreenFlag31

<div class="modal-wrapper">
  <section class="modal" #modal>
    <!--  Content will be projected here    -->
    <ng-content></ng-content>
  </section>

  <div class="modal-overlay" #overlay (click)="onClose()"></div>
</div>

GreenFlag31

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