LINQ in ngFor Angular 6

Question

I get some 15 different lookup list values in the component.ts and i assign each to a list and bind it to the <select> in html. This works fine.

To make this code more in a cleaner way, is there anything like this?

<mat-form-field class="example-full-width">
              <mat-label>Preferred Job</mat-label>
              <mat-select>
                 <mat-option *ngFor="let job of designationList.filter(x=>x.lookupName === 'Designation')" [value]="job.id">
                  {{job.lookupValue}}
                </mat-option> 
              </mat-select>
            </mat-form-field>

Kind of where or filter condition could directly be applied in the <select> so that i can no longer use separate list for each dropdown?

nevzatopcu · Accepted Answer · 2019-05-12T10:34:26.113

1

You can use custom function for this variable.

component.ts

filteredDesignationList(loopUpName: string){
    return this.designationList.filter(x=>x.lookupName === loopUpName)"
}

component.html

<mat-form-field class="example-full-width">
              <mat-label>Preferred Job</mat-label>
              <mat-select>
                 <mat-option *ngFor="let job of filteredDesignationList('Designation') [value]="job.id">
                  {{job.lookupValue}}
                </mat-option> 
              </mat-select>
            </mat-form-field>

edited May 12 '19 at 10:34

answered May 12 '19 at 10:17

nevzatopcu

1,049
1
7
13

Can a get accessor have parameters? – A Coder May 12 '19 at 10:23
Of course, there is a parameter in my example. You can edit accessors whatever you want. Just don't forget to return something. – nevzatopcu May 12 '19 at 10:27
the compile error i get is "A 'get' accessor cannot have parameters." ? any clues – A Coder May 12 '19 at 10:28
I am so sorry for wrong information. I check it and you are true. I am editing my answer. – nevzatopcu May 12 '19 at 10:33

score 1 · Answer 2 · answered May 12 '19 at 10:21

1

Yes, you should use a Pipe to filter your data instead of using the filter directly.

<mat-option *ngFor="let job of designationList|filter-pipe" [value]="job.id">
              {{job.lookupValue}}
</mat-option>

And take a look at this to learn how to implement a pipe:

https://angular.io/guide/pipes

answered May 12 '19 at 10:21

Mohammadreza Imani

430
5
13

this might be helpful too: https://stackoverflow.com/questions/44254511/got-error-when-i-used-custom-pipe-in-ngfor – Mohammadreza Imani May 12 '19 at 10:24
1

Hello, maybe this one also https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor – nevzatopcu May 12 '19 at 10:38
@nevzatopcu thats what exactly what i want and it was cleaner. thanks – A Coder May 12 '19 at 10:56
@MohammadrezaImani thanks for pointing to a elegant and functional way. – A Coder May 12 '19 at 10:56
your welcome but the angular concept is to use pipe here. – Mohammadreza Imani May 12 '19 at 11:20

LINQ in ngFor Angular 6

2 Answers2