title: How to prevent Dialog opening twice in angular material using angular5
body: <pre><code>    &lt;mat-autocomplete #auto="matAutocomplete"&gt;
   &lt;mat-option *ngFor="let person of filteredPersons | async" [value]="person.name" (onSelectionChange)="selectedPersonsInDialog(person)"&gt; &lt;img style="vertical-align:middle;" aria-hidden src="{{person.imgUrl}}" width="30" height="30" /&gt; &lt;span&gt;{{ person.name }}&lt;/span&gt; | &lt;small&gt;ID: {{person.id}}&lt;/small&gt; &lt;/mat-option&gt; &lt;/mat-autocomplete&gt;
          &lt;mat-autocomplete #auto="matAutocomplete"&gt;
            &lt;mat-option *ngFor="let person of filteredPersons |  async" [value]="person.name"(onSelectionChange)="selectedPersonsInDialog(person)"&gt;
            {{person}}  
            &lt;/mat-option&gt;  
          &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <blockquote>
    <p>This is my method in the component class:- Actually
    selectedPersonsInDialog function is being called twice so, always it
    displays 2 times dialog with latest selected and one previous selected
    value.</p>
  </blockquote>
  
  <pre><code>I want to display a dialog only once with latest value selected.
  
  selectedPersonsInDialog(person){
   this.selectedPerson=person;
  alert(this.selectedPerson); 
   let dialogRef = this.dialog.open(AddListOfPersonDialog, {
        width: '500px',
        data: { person:this.selectedPerson}
      });
    }*
  </code></pre>