title: Open MatDialog via dynamically added 'Click' event to an element
body: <p>I have an HTML list where I set .active class dynamically. Those elements that have this class need to have a 'Click' event that opens MatDialog. The problem is that I'm getting an error when trying to do something like that:</p>
  <p>Angular component .html file</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;span id=&quot;asd&quot;&gt;asd&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Angular component .ts file</p>
  <pre class="lang-js prettyprint-override"><code>constructor(private el: ElementRef) {}
  ...
  ...
  this.el.nativeElement.querySelector('#asd').addEventListener('click', this.selectTimeslot);
  ...
  ...
  selectTimeslot() {
    let asd2: MatDialogRef&lt;CalendarDialogComponent, any&gt; = this.asd.open(CalendarDialogComponent, { disableClose: true });
  
    asd2.afterClosed().subscribe(result =&gt; {
      console.log(`Dialog result: ${result}`);
    });
  }
  </code></pre>
  <p>Then when I click an element of the list I'm getting an error:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'open' of undefined</p>
  </blockquote>
  <p>Everything is working fine when I statically declare (click) directive inside HTML like that:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;span (click)=&quot;selectTimeslot()&quot;&gt;asd&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>How I can dynamically add a click event to the span element and be able to open the MatDialog component in the Angular 9? Thanks in advance.</p>