Allow click event only once on html element

Question

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.

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.

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.

                                            <mat-form-field >
                                              <mat-select  placeholder="Banks" #{{headerName}} (click)=getColumnData(i) multiple>
                                                <!-- <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search> -->
                                               <mat-option #{{headerName}}. (onSelectionChange)="sorton(-1, -1)" id="clearopt">Clear filter</mat-option>
                                                <mat-option *ngFor="let record of currentddvalues " (onSelectionChange)="sorton(i, record)" id={{record}} >
                                                  {{record}}
                                                </mat-option>

                                              </mat-select>
                                            </mat-form-field>

Adrita Sharma · Answer 1 · 2019-11-14T11:27:10.260

0

Try like this:

Working Demo

.ts

isClicked:boolean = false

getColumnData(i){
    this.isClicked = true
}

.html

 <mat-select  placeholder="Banks" #{{headerName}} (click)="!isClicked ? getColumnData(): false" multiple>
 </mat-select>

edited Nov 14 '19 at 11:27

answered Nov 14 '19 at 11:12

Adrita Sharma

21,581
10
69
79

Still my mat-select options are getting cleared after clicking on other one. – Veerendhar Reddy Nov 14 '19 at 11:24
Check the modified answer – Adrita Sharma Nov 14 '19 at 11:30
Thanks for quick response, but my problem not solved yet. Can any one have idea about angular table on which we can apply filters like as we do in excel sheet. I am trying to develop this kind for table but facing few gaps in development. – Veerendhar Reddy Nov 15 '19 at 06:59
You can use Angular Datatable for that. I answered it according to the question you posted – Adrita Sharma Nov 15 '19 at 07:02
It only provides sorting not filtering on column data based. To be clear I am looking for html table which exactly filter rows same as excel sheet filter do. – Veerendhar Reddy Nov 15 '19 at 07:49

Allow click event only once on html element

1 Answers1