title: Problems with *ngFor and MatDialog in Angular
body: <p>I'm currently building an Angular website. I create several components using a *ngFor loop. The created components each have a mouse event with which a MatDialog should be opened (<a href="https://material.angular.io/components/dialog/overview" rel="nofollow noreferrer">MatDialog</a>). The problem is that the dialog does not open properly and the buttons inside do not work. However, as soon as I remove the *ngFor loop and only represent the first element, the dialog works perfectly.
  Does anyone know this problem and how to fix it or an alternative to the *ngFor loop?</p>
  
  <p>Does not function:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let item of elements"&gt;
         &lt;div (mousedown)="openMatDialog($event)" class="title"&gt;{{item.title}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Does function:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;div (mousedown)="openMatDialog($event)" class="title"&gt;{{elements[0].title}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Function openMatDialog(e):</p>
  
  <pre class="lang-js prettyprint-override"><code>openMatDialog(e) {
      const matDialog = this.dialog.open(
          SettingsDialogComponent, { hasBackdrop: true }
      );
  }
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p><strong>Solution</strong>: use of <strong><em>trackBy</em></strong> in the *ngFor loop</p>