title: Angular: Show Component within Popup
body: <p>I have a <code>PopupComponent</code> (within a Angular Library) with some Input variables that I'm using like this:</p>
  <pre><code>&lt;lib-popup
      [popupHeight] = &quot;popupHeight&quot;
      [popupWidth] = &quot;popupWidth&quot;
      [popupPositionX] = &quot;popupPositionX&quot;
      [popupPositionY] = &quot;popupPositionY&quot;
    &gt;
  &lt;/lib-popup&gt;
  </code></pre>
  <p>Now I want to insert for example my <code>MapComponent</code> into that Popup, so that when I open the popup, it shows a Map.</p>
  <p>I added another input variable <code>contentComponent</code> like this:</p>
  <pre><code>  &lt;lib-popup
      [popupHeight] = &quot;popupHeight&quot;
      [popupWidth] = &quot;popupWidth&quot;
      [popupPositionX] = &quot;popupPositionX&quot;
      [popupPositionY] = &quot;popupPositionY&quot;
      [contentComponent] = &quot;GeomapComponent&quot;
    &gt;
    &lt;/lib-popup&gt;
  </code></pre>
  <p>My <code>popup.component.ts</code> looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Input, OnInit } from '@angular/core';
  import { MatDialog, MatDialogConfig } from '@angular/material';
  import { PopupContentDefaultComponent } from './popup.content.default.component';
  
  @Component({
    selector: 'lib-popup',
    templateUrl: './popup.component.html',
    styleUrls: ['./popup.component.css']
  })
  export class PopupComponent implements OnInit {
  
    @Input() popupPositionX = ''; // use default (px)
    @Input() popupPositionY = ''; // use default (px)
    @Input() popupHeight = '400px';
    @Input() popupWidth = '600px';
    @Input() popupOpen = false;
    @Input() popupClose = false;
    @Input() contentComponent = PopupContentDefaultComponent;
  
    private dialogRef!: any;
    private dialogConfig = new MatDialogConfig();
  
    constructor(public dialog: MatDialog) {}
  
    ngOnInit() {
      // set config values for popup
      this.dialogConfig.height = this.popupHeight;
      this.dialogConfig.width = this.popupWidth;
      this.dialogConfig.position = {
        left: this.popupPositionX,
        top: this.popupPositionY
      };
  
      if (this.popupOpen) {
        this.openDialog();
      }
  
      if (this.popupClose) {
        this.closeDialog();
      }
    }
  
    openDialog(): void {
      this.dialogRef = this.dialog.open(this.contentComponent, this.dialogConfig);
      console.log('Popup has been opened.');
    }
  
    closeDialog(): void {
      if (this.dialogRef) {
        this.dialogRef.close();
        console.log('Popup has been closed.');
      } else {
        console.log('There is no popup to close.');
      }
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Until now, everything works just fine! A popup will open which contains my <code>MapComponent</code>.</p>
  <h3>Now the problem:</h3>
  <p>I want to add a close button to my popup which is always there, no matter which content component I insert into the popup.
  So I think I need an additional component, something like <code>PopupContentComponent</code> which holds the button and some other stuff that each popup should contain, and which also has a placeholder for the component that I want to show.</p>
  <p>But how do I do this in Angular?</p>
  <p>I don't want to change the <code>MapComponent</code> and the Popup Component should stay within my library.</p>