title: How to expand image using MatDialog?
body: <p>So I'm currently making an image that, when clicked, it expands using MatDialog. I'm currently creating a new component to make the MatDialog, however, one thing bugs me.</p>
  <p>In my main component's HTML, I have the image as shown in the code below:</p>
  <pre><code>&lt;section class=&quot;carousel&quot; *ngIf=&quot;image&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;background&quot;&gt;
        &lt;img class=&quot;image-src&quot; [src]=&quot;image&quot; alt=&quot;&quot; (click)=&quot;openImage()&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  <p>As seen, when the image is clicked, it triggers the openImage() in my typescript component:</p>
  <pre><code>openImage(){
  this.dialog
    .open(DialogExpandImageComponent)
    .afterClosed()
    .subscribe(() =&gt; console.log(&quot;test successful&quot;))
  }
  </code></pre>
  <p>My issue here is that, for the Dialog that expands the image, I'm creating another HTML and TS.</p>
  <p>The TS code is currently as follows:</p>
  <pre><code>import { Component } from '@angular/core';
  import { MatDialogRef } from '@angular/material/dialog';
  
  @Component({
    selector: 'app-dialog-expand-image',
    templateUrl: './dialog-expand-image.component.html',
    styleUrls: ['./dialog-expand-image.component.scss'],
  })
  export class DialogExpandImageComponent {
    constructor(public dialogRef: MatDialogRef&lt;DialogExpandImageComponent&gt;) {}
  
    closeImage() {
      this.dialogRef.close();
    }
  }
  </code></pre>
  <p>In my HTML, I just put a &quot;TEST&quot; word and it works when I click the image (the TEST is displayed accordingly). My issue here is that I don't know how I'm going to bring the image that's on my other component (the main component above where the image can be clicked) to be shown in this current dialog component. If anyone has a good suggestion, I'd be bery thankful.</p>