title: Allow click event only once on html element
body: <p>I am using below code in my application.Here my problem is I have included below code in a every table column header. So when ever I click on mat-select a new currentddvalues will be formed and will be used in *ngFor loop of mat-option.</p>
  
  <p>The problem is when ever I click on one column header, data will be loaded to all column mat-select options, because of this I am not able to persist user selection once clicked on another mat-select.</p>
  
  <p>Can any once help how to restrict this ngFor only once on mat-select or any other suggestion to persist user selection after clicking on other mat-select.    </p>
  
  <pre><code>                                            &lt;mat-form-field &gt;
                                                &lt;mat-select  placeholder="Banks" #{{headerName}} (click)=getColumnData(i) multiple&gt;
                                                  &lt;!-- &lt;mat-select-search [formControl]="bankMultiFilterCtrl"&gt;&lt;/mat-select-search&gt; --&gt;
                                                 &lt;mat-option #{{headerName}}. (onSelectionChange)="sorton(-1, -1)" id="clearopt"&gt;Clear filter&lt;/mat-option&gt;
                                                  &lt;mat-option *ngFor="let record of currentddvalues " (onSelectionChange)="sorton(i, record)" id={{record}} &gt;
                                                    {{record}}
                                                  &lt;/mat-option&gt;
  
                                                &lt;/mat-select&gt;
                                              &lt;/mat-form-field&gt;
  </code></pre>